11

I've been digging around everywhere and I can't seem to figure this out. It's driving me crazy! I'm a newbie to javascript in general, so I can't quite put a finger on the translation that would fix my issue. I noticed that a lot of people have this problem, but they all seem to use more advanced(or just confusing) code than I. Anyway, here goes!

I've been having the problem where all of my markers share the same content.

function initialize() {
var myOptions = {
    center: new google.maps.LatLng(34.151271, -118.449537),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

setMarkers(map, clubs);

}

var clubs = [
['Poop', 34.223868, -118.601575, 'Dookie'],
['Test Poop', 34.151271, -118.449537, 'Test Business']
];

function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/image.png',
    new google.maps.Size(25, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var club = locations[i];
var myLatLng = new google.maps.LatLng(club[1], club[2]);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    shape: shape,
    title: club[0],
});
google.maps.event.addListener(marker, 'click', function(){
    infowindow.setContent(club[3]);
    infowindow.open(map, this);
});
}
}

I know I'm crappy, but someone please help me! :P

duncan
  • 31,401
  • 13
  • 78
  • 99
Mikey
  • 113
  • 1
  • 4

2 Answers2

35

The problem is because you're setting the event listener for the marker click within a loop. So all the markers end up only getting the content for the last of your markers. Try this instead. Create a new global function:

function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
}

Then within your loop, replace this:

google.maps.event.addListener(marker, 'click', function(){
    infowindow.setContent(club[3]);
    infowindow.open(map, this);
});

with this: 

// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, club[3]);
duncan
  • 31,401
  • 13
  • 78
  • 99
  • Thanks Duncan! Works beautifully and took 2 seconds to fix. You're the man! – Mikey Mar 02 '12 at 21:10
  • Hi guys, this solution also worked for me, thank you very much. However I would like to understand why it works this way and not the other? We are still binding the listener within the loop, however that code is now wrapped in a function. Why would that make any difference? Thanks! – WPalombini Nov 25 '15 at 00:55
  • @WPalombini This way you're making sure that each marker's event listener uses exactly the text you want to display each time. The other way you're still attaching an event listener to every marker, however the content that the infowindow has just comes from whatever `club[3]` has, at the time you click the marker. That'll just be whatever it is at the end of the loop. – duncan Nov 25 '15 at 08:28
  • Thanks! Searched a long time for a solution, this easy code solved also my problem! – NVO Aug 15 '16 at 07:12
0

When setting the marker object (var marker = new ...) change this line: "title: club[0]," to "title: club[i],". Yes, just change the 0 to i.

That should solve the problem.

Try this link for a tutorial on Google Maps API with examples.

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

It should be very easy and helpful.

Yaztown
  • 370
  • 1
  • 3
  • 8
  • When I tried replacing the '0' with 'i' it deleted my last marker and made them all useless. '0' refers to the name of my marker. – Mikey Mar 02 '12 at 21:11