I've seen this tool which let you draw a line on gmaps and it generates the js code for you
So the JS is:
var myCoordinates = [
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
What I would like to do is to start the line from a pin I receive and not a pin I set when I click as per that tool and then I would to draw a infobox at the end of that line (so not where it starts form the pin).
What I am aiming for is to draw a line form a starting point and have an infobox such as per this image below, see the lines on the map
Therefore I can pass the coords here:
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
But how would I target the end of the line and place text there?
With this answer I can define a start and end, but how to draw a box at the end point?
I think you can do it using a marker at the end point of the line, then attaching, for example an infoWindow, at the end and finally hiding the marker.
function initMap() {
var coordinates = {
lat: 40.785845,
lng: -74.020496
};
var coordinates2 = {
lat: 40.805845,
lng: -74.130496
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: coordinates,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
var infoMarker = new google.maps.Marker({
position: coordinates2,
map: map
});
var infowWindow = new google.maps.InfoWindow();
var line = new google.maps.Polyline({
path: [
marker.position,
infoMarker.position
],
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
});
line.setMap(map);
infowWindow.setContent("<b>Hello world!</b>");
infowWindow.open(map, infoMarker);
infoMarker.setVisible(false);
}
google.maps.event.addDomListener(window, "load", initMap);
Check it working on this jsfiddle
I want to show an area boundary in Google maps using API v3. I've got a list of postcodes for the area that the client covers, I've converted these to LatLng coordinates and can create a polygon with them but as you would expect, it's a mess of lines and not a solid shape area.
Anyone know if this is possible and if so, how to do this? Or a different way of doing this. Code I'm using below:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.921772, lng: -3.383983},
scrollwheel: false,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
new google.maps.LatLng(55.948969,-3.1927988),
new google.maps.LatLng(55.949292,-3.209399),
new google.maps.LatLng(55.957032,-3.1850223),
new google.maps.LatLng(55.929196,-3.2089489),
new google.maps.LatLng(55.934519,-3.2131166),
new google.maps.LatLng(55.924534,-3.2096679),
new google.maps.LatLng(55.901564,-3.2035307),
new google.maps.LatLng(55.940591,-3.2170048),
new google.maps.LatLng(55.943847,-3.2184679),
new google.maps.LatLng(55.932823,-3.2462462),
new google.maps.LatLng(55.924084,-3.2938003),
new google.maps.LatLng(55.948636,-3.3239403),
new google.maps.LatLng(55.94727,-3.2158532),
new google.maps.LatLng(55.946459,-3.2359557),
new google.maps.LatLng(55.942119,-3.2790791),
new google.maps.LatLng(55.943678,-3.2820926),
new google.maps.LatLng(55.933458,-3.2867013),
new google.maps.LatLng(55.907231,-3.2498242),
new google.maps.LatLng(55.914285,-3.2391396),
new google.maps.LatLng(55.929872,-3.2483283),
new google.maps.LatLng(55.919613,-3.272673),
new google.maps.LatLng(55.913635,-3.2773089),
new google.maps.LatLng(55.953223,-3.1155757),
new google.maps.LatLng(55.951535,-3.1124523),
new google.maps.LatLng(55.944854,-3.1050555),
new google.maps.LatLng(55.931274,-3.1456767),
new google.maps.LatLng(55.938277,-3.1758846),
new google.maps.LatLng(55.919988,-3.1677619),
new google.maps.LatLng(55.907921,-3.1339982),
new google.maps.LatLng(55.899518,-3.1649876),
new google.maps.LatLng(55.955011,-3.1932569),
new google.maps.LatLng(55.953699,-3.1905739),
new google.maps.LatLng(55.951683,-3.2010498),
new google.maps.LatLng(55.951121,-3.2034185),
new google.maps.LatLng(55.877027,-3.1487295),
new google.maps.LatLng(55.943146,-3.0559971),
new google.maps.LatLng(55.943718,-3.047895),
new google.maps.LatLng(55.939247,-3.0130501),
new google.maps.LatLng(55.892996,-3.0728633),
new google.maps.LatLng(55.89186,-3.0692661),
new google.maps.LatLng(55.892996,-3.0728633),
new google.maps.LatLng(55.956248,-3.4049741),
new google.maps.LatLng(55.958401,-3.204173),
new google.maps.LatLng(55.953391,-3.2083257),
new google.maps.LatLng(55.947542,-3.2146128),
new google.maps.LatLng(55.943346,-3.2109749),
new google.maps.LatLng(55.945203,-3.2049162),
new google.maps.LatLng(55.973614,-3.3522429),
new google.maps.LatLng(55.959293,-2.9831886),
new google.maps.LatLng(55.958761,-3.2259363),
new google.maps.LatLng(55.958258,-3.2509238),
new google.maps.LatLng(55.954508,-3.2162083),
new google.maps.LatLng(55.969754,-3.2567425),
new google.maps.LatLng(55.965345,-3.2713865),
new google.maps.LatLng(55.966799,-3.2759201),
new google.maps.LatLng(55.961259,-3.2624101),
new google.maps.LatLng(55.960523,-3.3189479),
new google.maps.LatLng(55.980282,-3.2222259),
new google.maps.LatLng(55.970837,-3.2150703),
new google.maps.LatLng(55.972055,-3.1971305),
new google.maps.LatLng(55.977169,-3.1812151),
new google.maps.LatLng(55.970188,-3.1726547),
new google.maps.LatLng(55.970989,-3.1715573),
new google.maps.LatLng(55.9706,-3.1709047),
new google.maps.LatLng(55.969318,-3.1629671),
new google.maps.LatLng(55.958457,-3.1835442),
new google.maps.LatLng(55.954315,-3.1853397),
new google.maps.LatLng(55.956023,-3.1607265),
new google.maps.LatLng(55.955162,-3.15005),
new google.maps.LatLng(55.950521,-3.1836543),
new google.maps.LatLng(55.94698,-3.1866047),
new google.maps.LatLng(55.934593,-3.1935895),
new google.maps.LatLng(55.934464,-3.1948181),
new google.maps.LatLng(55.930516,-3.1756174),
new google.maps.LatLng(55.97862,-3.2535203),
new google.maps.LatLng(55.951962,-3.1749222)
];
// Construct the polygon.
var areaCovered = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25
});
areaCovered.setMap(map);
}
</script>
Okay here is that code example I promised. This will give you a square/rectangle polygon that contains all the points in triangleCoords.
// create new LatLngBounds
var bounds = new google.maps.LatLngBounds();
// extend bounds to contain each coordinate
for (var i = 0, i_end = triangleCoords.length; i < i_end; i++) {
bounds.extend(triangleCoords[i]);
}
// get the NSEW corners of the bounds
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
var SE = { lat: SW.lat(), lng: NE.lng() };
var NW = { lat: NE.lat(), lng: SW.lng() };
// Construct the polygon.
var areaCovered = new google.maps.Polygon({
paths: [NE, SE, SW, NW],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25
});
areaCovered.setMap(map);
I also wanted to clarify why your code was creating a mess of lines. A polygon will construct its boundary based on the order of the coordinates you supply it. To get an idea of what I'm talking about you can change the order in my example to this paths: [NE, SW, SE, NW].
To give you a visual, you can think of it like the game of connect the dots. If you didn't connect these dots in order you would end up with a mess of lines instead of a cute laughing Pikachu.
My mistake, the Polygon have NOT to be closed.
Bevor Edit:
Your Polygon have to be closed.
As in https://developers.google.com/maps/documentation/javascript/shapes , where i think you get your source from, the last and the first point are the same.
Hey there i´m trying to find a way to just increase the length of a line without changing the orientation
i tried this with Polyline
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4419, lng: -122.1419},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
}
and it works as expected
but i rather want it like
or
i only have the two coordinates from first example
it should be geodesic and theoreticaly idealy arround the globe back at same start so it will be like endless
i also tried to find out a way to calculate the some more far coordinates but searching is a mess because everboidy want to be found for caluclating distances.
so having two coordinates following the "line-through orientation" of but have high distance like some thousand kilometers pls let me know
You can use the Google Maps Javascript API Geometry library to compute the heading of the line and extend it an arbitrarily long distance along that heading.
code snippet::
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.4419,
lng: -122.1419
},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
// extend line from each end along its existing heading
// pick 20e6 meters as an arbitrary length
var lineHeading = google.maps.geometry.spherical.computeHeading(line.getPath().getAt(0), line.getPath().getAt(1));
var newPt0 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(0), 20000000, lineHeading);
line.getPath().insertAt(0, newPt0);
var newPt1 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(1), 20000000, lineHeading + 180);
line.getPath().push(newPt1);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
I am trying to implement a google map on the site I'm working on. I copied a example from the google maps api site where you can overlay circles. The map loads fine but non of the controls work being: zooming in and out, panning the map as such. Does anyone know what may be causing this> Below is my code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
population: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Here is a link to the site where its going wrong: http://surftoursouthafrica.com/map
Your code is fine.
On your webpage you have much more stuff that interfere with the map.
Remove col-xs-12 class from the div that surrounds map-canvas and it will work:
<div class="content">
<div id="map-canvas"></div>
</div>
I have the following code to highlight an area on google maps using the javascript v3 api.
// Maps
$(document).ready(function(){
if($(document).find("map_canvas"))
Maps.init();
});
var Maps = {};
//The map to display
Maps.map;
//List of markers
Maps.markers = new Array();
Maps.markers.previous;
Maps.lines = new Array();
Maps.lines.toStart;
Maps.area;
//init the map
Maps.init = function() {
var mapOptions = {
center: new google.maps.LatLng(-39.483715,176.8942277),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Maps.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(Maps.map, 'click', function(event){Maps.addMarker(event.latLng);});
}
//Add a marker to the maps
Maps.addMarker = function(latLng){
var marker = new google.maps.Marker({
position: latLng,
map: Maps.map
});
Maps.markers.push(latLng);
console.log(Maps.markers.length);
if(Maps.markers.length > 1){
Maps.drawLine([Maps.markers.previous, latLng]);
}
Maps.markers.previous = latLng;
}
Maps.drawLine = function(path){
var Line = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
Line.setMap(Maps.map);
if(Maps.markers.length > 2){
if(Maps.lines.toStart != null)
Maps.lines.toStart.setMap(null);
Maps.lines.toStart = new google.maps.Polyline({
path: [path[path.length - 1], Maps.markers[0]],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
Maps.lines.toStart.setMap(Maps.map);
if(Maps.area != null)
Maps.area.setMap(null);
Maps.area = new google.maps.Polygon({
paths: Maps.markers,
strokeColor: "#000000",
strokeOpacity: 0,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Maps.area.setMap(Maps.map);
}
}
It works perfectly as expected an produces a result like so....
But the problem is, is that I need to add markers inside the polygon for obvious reasons. When I click on the polygon expecting a marker to be added the polygon seems to be getting the clicks and not the maps. Is there anyway to get around this? Or make it so only the map receives the clicks?
There is a clickable property in the polygon options. Set that to false and the polygon will ignore clicks and the event will fall through to the map.
Polygon Options