Only showing the info window of second pin

Question

After I add info windows to my pin array, when I click on the second pin the infowindow pops up over the first pin. And when I click on the first pin the second pin's infowindow pops up.

This is the pin array:

function setMarkers(map) {
// Adds markers to the map.

var image = {
    url: 'http://localhost:8888/wp-content/plugins/wp_cat_map/assets/img/home_pin.png',
    size: new google.maps.Size(35, 42),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 42)
};

var shape = {
    coords: [0, 0, 35, 42],
    type: 'rect'
};

for (var i = 0; i < thePins.length; i++) {

    var pin = thePins[i];

    var contentString = pin[0];

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });

    var marker = new google.maps.Marker({
        position: {lat: pin[1], lng: pin[2]},
        map: map,
        icon: image,
        //shape: shape,
        title: pin[0],
        zIndex: pin[3]
    });

    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });
}
}

Your `localhost:8888` "Test Page" link isn't reachable by anyone else. — Paul Roub, Dec 05 '15 at 21:15
Sorry I know that. I forgot it was my local site. Thanks for removing. — thebigtine, Dec 05 '15 at 21:25
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) — geocodezip, Dec 05 '15 at 23:18
@geocodezip that question is nothing like mine! Seriously, I am asking a completely different question. The fellow from that question was asking for someone to do the work for him. I was asking why my code, which I had done myself, was not working. His code didn't even include the functions for the info windows. It didn't include and functions at all. — thebigtine, Dec 06 '15 at 09:03
The code in the answer to that question solves your problem. If it doesn't help you, it might help someone else. — geocodezip, Dec 06 '15 at 12:01
I see where you are coming from, but their title did not reflect my question and if I wanted spoon feeding to get my answer then I would of looked at that question a long time ago without working on it myself. It's a bit unreasonable to expect me to of found that question when their title wasn't relevant and all they where asking was, "here is my array, do the work for me". I will look harder next time. — thebigtine, Dec 06 '15 at 12:06

score 1 · Accepted Answer · answered Dec 05 '15 at 21:14

Thanks to variable hoisting, all of those marker and infowindow references are to the same variable, whose declaration is basically moved up to the top of the containing function.

You either need to wrap the handler-creating in an anonymous function, or just move it to a separate, regular function. e.g.

function addMarker(pin, map, image, contentString) {
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
  });

  var marker = new google.maps.Marker({
    position: {lat: pin[1], lng: pin[2]},
    map: map,
    icon: image,
    title: pin[0],
    zIndex: pin[3]
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

for (var i = 0; i < thePins.length; i++) {
  var pin = thePins[i];
  var contentString = pin[0];

  addMarker( pin, map, image, contentString);
}

Only showing the info window of second pin

1 Answers1