Google maps api - infowindow content doesn't loop correctly

Question

I have some code in the below example that works great - but!

The looping for function doesnt work when it comes to the infowindow. You'll notice that if you click on either map icon the same link "name2" shows up. I need this to loop and change the information correctly eg: "name1" for the first map marker and "name2" for the second.

I'm probably missing something simple!?

http://jsfiddle.net/bTujZ/565/

  var infowindow = new google.maps.InfoWindow({ content: marker.url });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,this);
  });

Thanks

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example). Please post _all_ the relevant code in your question, not just a fiddle and a small snipped which can't contain the issue or allow us to reproduce the issue. — geocodezip, Feb 05 '14 at 01:49

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

You have to read up on Javascript Closures

Meanwhile, here is your fiddle fixed: http://jsfiddle.net/bTujZ/566/

All you had to do was create a closure inside if your loop using an anonymous (function(){})().

edited May 23 '17 at 12:03

Community

1
1

answered Feb 05 '14 at 01:32

bits

8,110
8
46
55

I don't see any markers on your "fixed" fiddle (see this in the javascript console: `GET http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png 503 (Service Unavailable)`) – geocodezip Feb 05 '14 at 01:52
Don't know, it works for me both in latest Chrome and Firefox. Does the OP's original fiddle work for you? – bits Feb 05 '14 at 02:00
I get that error in Chrome (Version 31.0.1650.63 m) for both fiddles. – geocodezip Feb 05 '14 at 02:11
Don't see markers in FF (11.0) either (in either fiddle), no errors or indication why though. – geocodezip Feb 05 '14 at 02:17
Thanks Bits your the best! Works perfect on my end in the newer browsers. – user2353244 Feb 05 '14 at 05:29

score 0 · Answer 2 · answered Feb 05 '14 at 05:07

You are using only one infowindow for all markers.

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,this);
  });

From your code when marker is clicked, it looks up infowindow in memory, which is the one created at the end of your loop.

Thus, you are seeing all the same infowindow for all markers.

If you want to see different infowindow, instantiate it inside addListenter function. Or, you can set infowindow contents of infowindow inside the addListener function.

Google maps api - infowindow content doesn't loop correctly

2 Answers2