Just a quick query - I'm sure it has a quick answer :)
I'm trying to loop through an array of points defining a polygon in google maps and change them (my test programme is just decrementing the latitude by a small amount, to see if I can get it to work). I've taken my experimental code from the Bermuda Triangle example, but with a LatLong array rather than MVC.
triangleCoords = [
new google.maps.LatLng(25.774, -80.190 ),
new google.maps.LatLng(18.466, -66.118 ),
new google.maps.LatLng(32.321, -64.757 )
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
And I'm trying to alter the points with this:
var vertices = bermudaTriangle.getPath();
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
vertices.setAt(i, new google.maps.LatLng( xy.lat()-0.01, xy.lng() ));
}
But it doesn't work. Can anyone see what is wrong? Thanks
You've got an array of coordinates, saved as the variable vertices, which you've then updated with new values... and then what? All you've done is update an array.
If you want to redraw the polygon, you also need to then do:
bermudaTriangle.setPath(vertices);
I know this is a common question, and I'm a JS newbie, but I'm completely stumped even after searching StackOverflow for hours.
I'm using the Google Maps API, and want to keep track of my markers by association with an ID. So I have var pinArray = new Object() as a global variable, and add markers like this:
function CreateMarkers (data){
data.forEach(function(store) {
<!-- CREATE MAP MARKER -->
var mapLat = store.latitude;
var mapLong = store.longitude;
var mapLatLng = { lat: parseFloat(mapLat), lng: parseFloat(mapLong) };
var marker = new google.maps.Marker({
position: mapLatLng,
title: store.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: 'Green',
fillOpacity: 0.8,
strokeWeight: 0.6,
},
zIndex: 0
});
cluster.addMarker(marker);
var key = store.Id;
pinArray['${key}'] = marker;
})
}
Where cluster is var cluster = new MarkerClusterer(map);.
When I try to do console.log(pinArray); back outside of the function, I get an empty object: Object {}. I've tried not using string interpolation as well, like pinArray[store.Id] = marker;, but get the same problem.
I need to keep this global associate between pins and IDs because I need to reference and update markers by their ID in other functions. Or at least, I think I do, I'm open to other ways of doing this. Help is very much appreciated; thank you in advance.
Typically when I've done something like this in the past I'll use a standard javascript array instead of an ID'd object:
var pinArray = [];
Then use push to add the markers to it as you go:
pinArray.push(Marker);
When you create the pin you can include your key in its property definition:
var marker = new google.maps.Marker({
position: mapLatLng,
title: store.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: 'Green',
fillOpacity: 0.8,
strokeWeight: 0.6,
},
zIndex: 0,
key: store.Id
});
and you can write a simple looping lookup function to find the individual map marker if you need to pull them by ID. Something like:
function GetMarkerByKey(key) {
var i = 0;
while (pinArray[i].key != key) {i++}
return pinArray[i];
}
Also, if you're using it in a dynamic event handler for click or hover you can use the this property to identify which marker they are activating it with.
~~~Edited to fix a syntax error~~~
var pinArray assigns the variable within the scope of function it's defined. The safest way to ensure you're defining a variable as global, regardless of where you are inside a function, is to assign it to window.
window.pinArray = new Object();
I'm trying to create a map with a lot of flight paths, gathered from a database.
The method i use could probably be improved a little:
var flightPlanCoordinates1 = [
new google.maps.LatLng(53.63384159955519, 10.005816800985485),
new google.maps.LatLng(40.689837457540044, -74.17809198377654)
];
var flightPath1 = new google.maps.Polyline({
path: flightPlanCoordinates1,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath1.setMap(map);
...
The above will be looped over and over to show all the routes collected from the database.
So my question is, if it would be possible to simplify this, so that all of the above does not have to be looped, only the coordinates.
What i'm thinking is that a "break" function for "flightPlanCoordinates1", to break for each route, would be a good solution.
Appreciate any help
First, define your polyline options:
var pathOptions = {
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
};
Then in your loop you can create the polyline with the options:
var path = new google.maps.Polyline(pathOptions);
Then get the start and end points (where start_lat/lng end_lat/lng are your coordinates):
var start_point = new google.maps.LatLng(start_lat, start_lng);
var end_point = new google.maps.LatLng(end_lat, end_lng);
Then apply it to the polyline and set it on the map:
path.getPath().setAt(0, start_point);
path.getPath().setAt(1, end_point);
path.setMap(map);
You get the idea?
I'm trying to use the JavaScript API for GoogleMaps to draw a bunch of lines but I keep getting syntax errors I don't understand. My data is stored as such:
var line_map = {};
line_map['l1'] = {
path: [new google.maps.LatLng(42.3581, -71.0636), new google.maps.LatLng(42.351821, -71.045461)],
weight: 2
};
With many other line entries. I then try to use it with the following:
for (var entry in line_map) {
var line = new google.maps.Polyline({
path: entry.path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: entry.weight
});
// Add the line to map
line.setMap(map);
}
However I keep getting an error that says Invalid value for constructor parameter 0: undefined
I get that it's saying entry.path is undefined but I don't understand why because I clearly defined it in the entry for l1
You should change this:
path: entry.path
to
path: line_map[entry].path
And do the same with the weight. Check out this working fiddle - I changed some coordinates to see the line.
EDIT: There is also a good explanation on this post about the for...in loop and objects.
the following code is used to draw a polyline on Google Maps using V3 API, but sometimes is draws the polyline and most of times doesn't despite there are point (as I can show the points on the map as markers) but no polyline appears
update 2 : I am using openstreetmap layer over Google maps. does that cause the problem when drawing the polyilne ?
w variable contains data as string , for example :
w= 35.1212,55.2333\n36.32366,56.3333
Real data sample for w : [this code can draw markers for the following points but can't draw a polyline ]
34.440501,31.515222
34.441933,31.514346
34.44247,31.514013
34.442603,31.51394
34.443607,31.513423
34.4445,31.512926
34.444762,31.512772
34.445186,31.512523
34.445257,31.512481
34.445311,31.512449
34.445614,31.512264
34.446244,31.511867
34.446939,31.511429
34.447351,31.511193
34.448081,31.512174
34.448241,31.512357
34.448576,31.512741
34.449147,31.513185
34.4499,31.513723
34.450894,31.514401
34.451925,31.515362
34.452905,31.516176
34.454194,31.517266
34.455337,31.518236
34.456215,31.51898
34.456987,31.519646
34.457583,31.520166
34.458298,31.520772
34.458989,31.52139
34.459659,31.521959
34.460476,31.522653
34.461192,31.523228
34.461869,31.523788
34.46256,31.524376
34.463302,31.525015
34.464062,31.525668
34.464433,31.525986
34.464737,31.526246
34.465247,31.526683
34.465498,31.526907
34.466666,31.52792
34.46722,31.528404
34.467327,31.528495
34.468014,31.529081
34.468379,31.52939
34.469296,31.530177
34.469771,31.530583
34.470152,31.53091
34.470951,31.531597
34.471617,31.532172
34.472388,31.532838
34.472664,31.533076
34.47295,31.533397
34.473422,31.533653
34.474028,31.534065
34.474844,31.534629
34.475725,31.535253
34.476083,31.535517
34.476697,31.535947
34.477105,31.536209
34.477627,31.536477
34.478,31.536742
34.478398,31.536989
34.478935,31.537325
34.480044,31.537975
34.480985,31.538529
34.481362,31.53878
34.481416,31.538819
34.482407,31.539419
34.482682,31.539109
34.483132,31.538603
34.483341,31.538368
34.483917,31.537753
34.484202,31.537449
34.484288,31.537357
34.484944,31.536587
34.485118,31.536383
34.485205,31.536304
34.485648,31.535903
34.485984,31.535598
34.486246,31.535381
34.486445,31.535291
34.486533,31.535254
34.486607,31.535282
34.486706,31.535354
34.486869,31.535526
34.487012,31.535692
34.487212,31.535923
34.487273,31.536006
34.487767,31.53571
34.488336,31.535395
34.48883,31.535148
34.489078,31.535032
34.489354,31.534901
34.48955,31.534788
34.489756,31.535011
34.489831,31.535097
34.490268,31.534748
34.49065,31.534473
34.490857,31.53436
34.491044,31.534319
34.491352,31.534248
34.491458,31.534237
34.491548,31.534304
34.491879,31.534209
34.492227,31.534203
34.492457,31.534214
34.492042,31.533636
34.492162,31.533542
note : I have reversed lng and lat when creating a point for some purpose
where a is array that has the points to represent as a polyine
code
var mypolyline = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});
// var bounds2 = new google.maps.LatLngBounds();
var a=w.split("\n");
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var path = [];
var path = mypolyline.getPath();
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
// alert(path.length);
path.push(point);
mypolyline.setPath(path);
mypolyline.setMap(map);
}
CreateMarker() function
function createMarker(id,name,point,icon,type) {
// var marker = new google.maps.Marker(point, customIcons[type]);
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({ content: name });
infowindow.open(map, marker);
map.panTo(point);
});
return marker;
}
So you create an array, then you ignore that and recreate it as an MVCArray using the getPath() function. Get rid of the first line (this isn't the cause of the problems though).
var path = [];
var path = mypolyline.getPath();
Just a thought - is the path a required attribute when you first create the polyline?
It seems to me that you initially create the mypolyline without any path. So when you then do this on the first iteration, it's not going to work, because all you're passing to .setPath() is one point, but I assume a path can only work when there's at least 2 points.
path.push(point);
mypolyline.setPath(path);
Update: I think the thing to do would be to just start out with an empty array, loop over your coordinates adding them into the array. Then after the loop, create the polyline, rather than trying to update it each time you iterate over the loop. For instance:
var a=w.split("\n");
var path = [];
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
path.push(point);
}
var mypolyline = new google.maps.Polyline({
path: path,
map: map,
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});