Google Map wrong marker getting the event attribute

I am trying to add an event listener to every marker on a google map, but for some reason the last of markers is the only one getting the listener.

Here is the page with the map that is having the problem: http://www.comehike.com/outdoors/parks/trailhead.php

You see, when you click on any marker, only the bottom left one gets the html pop up. What I need is to h开发者_StackOverflow社区ave the popup happen on the marker that is clicked.

Any idea what may be causing this?

Thanks, Alex

Here is the JSFiddle Demo that is similar to your website's google map, but instead with ajax, i just placed 3 "dummy" Lat Lng coordinate to it. Let me know if you need further help with explanation:

The reason is within your callback function. In your initializeTrailheads() function you created a local variable name marker and attached an on click event to it. You then assigned marker to the infowindow doing infowindow.open(map, marker); google.map.event.addListener has a callback function that is in a different scope when a click is done. So, it basically grabs the marker variable of the scope of its parent because it doesn't have one within itself. Usually than not by the time a click event is fired the marker becomes the latest marker that you intialize(which is the last one), and basically getting attached with the info window which doesn't link to any other markers prior to it and thus cause your issue. What you have to do is simply replace the variable marker with this which refers to the marker that is being clicked and that should fix your issue:

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

This is just off the top of my head. Please let me know if i didn't explain it with clearity on some parts.

This is a very common problem.Take a look at this code sample taken from here

var map;
var infoWindow;
var message = ['This', 'is', 'the', 'secret', 'message'];

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}

function addMarkers() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  function createMarker(map, position, number) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      var myHtml = '<strong>#' + number + '</strong><br/>' + message[number - 1];
      infoWindow.setContent(myHtml);
      infoWindow.open(map, marker);
    });
  }

  for (var i = 1; i <= 5; i++) {
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                        southWest.lng() + lngSpan * Math.random());

    createMarker(map, latLng, i);
  }
}

Hope you find this useful