CODEWITHSUNDEEP
javascriptgoogle-mapsmarker
Çağdaş Takış
Çağdaş Takış

Reputation: 123

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?

Upvotes: 0

Views: 2421

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93193

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;
             });    

 })

Upvotes: 2

Related Questions