Çağdaş Takış Çağdaş Takış - 4 months ago 41
Javascript Question

Google Map Markers With Url

I really cant understand javascript, i know it should be a very easy question but i stucked..
I have a google map with multiple markers and i added every marker and work perfect but i wanted to give them links. My locations array is like;

['http://website.com',36.598900,35.202094,'1']


i use [1] and [2] as lat long but i wanted to use [0] as link. My loop works perfect but every marker's link going to last item's link

Here is my loop

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
url: locations[i][0],
});

google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});

}


Where did i make the mistake?

Answer

1/ You need to add var before marker = new google.maps.Marker({ ,

Because , you use now marker as Global variable which is overridden for each iteration.

2/ Anyway, best practices are to save all markers as object attributes . Let's call this Object: mk , then your markers will be mk.marker0,mk.marker1,...so on.

var mk={}; // this is nameSpace to save all markers
locations.map((loc,i)=>{
    mk['marker'+i] = new google.maps.Marker({
      position: new google.maps.LatLng(loc[1], loc[2]),
      map: map,
      icon: image,
      url: loc[0],
    });
    return mk['marker'+i];
}).forEach((marker)=>{
              google.maps.event.addListener(marker, 'click', function() {
                  window.location.href = marker.url;
             });    

 })