Getting the same Google Maps Marker id on click

Question

I am trying to get the id/index of the individual markers on a google map when I click them.

At the moment, I am only getting the same one which is id: 4

Here is a JSFIDDLE

Here is where I set the markers:

function setMarkers(locations) {

    var bounds  = new google.maps.LatLngBounds();

    for (var i = 0; i < locations.length; i++) {
        var loc = locations[i];
        var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: currentLatLong,
            map: map,
            index: i,
            animation: google.maps.Animation.DROP,
            title: loc[0],
            zIndex: loc[3]
        });

        marker.addListener('click', function(e, i) {
            var info = marker.index;
            document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
        });

        bounds.extend(currentLatLong);

        // Push marker to markers array
        markers.push(marker);
    }

    map.fitBounds(bounds);      
    map.panToBounds(bounds);    
}

How to replicate:

1) Click the search button that is left of the screen

2) Click a marker, and then another.

I would like to get that index of the marker so I can display the data that is in the array matching the marker.

Has anyone got any ideas? I thought it was because the loop overriding the event listener and I tried moving it out but then nothing happens.

Answer 1

Inside the "click" event listener function this refers to the clicked marker, so change:

marker.addListener('click', function(e, i) {
    var info = marker.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

To:

marker.addListener('click', function(e, i) {
    var info = this.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

proof of concept fiddle

(another option would to get function closure on the marker variable, but that would add more overhead)

code snippet:

var map;
var markers = [];
var initialEmptyMarkers = [];
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var infowindow = new google.maps.InfoWindow({
  content: "Content"
});

function setMarkers(locations) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position: currentLatLong,
      map: map,
      index: i,
      animation: google.maps.Animation.DROP,
      title: loc[0],
      zIndex: loc[3]
    });

    bounds.extend(currentLatLong);

    marker.addListener('click', function(e, i) {
      var info = this.index;
      document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
    });

    // Push marker to markers array
    markers.push(marker);
  }

  map.fitBounds(bounds);
  map.panToBounds(bounds);
}

function reloadMarkers() {

  // Loop through markers and set map to null for each
  for (var i = 0; i < markers.length; i++) {

    markers[i].setMap(null);
  }

  // Reset the markers array
  markers = [];

  // Call set markers to re-add markers
  setMarkers(locations);
}

function initMap() {

  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(10, 12),
    mapTypeId: google.maps.MapTypeId.MAP
  }

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Bind event listener on button to reload markers
  document.getElementById('searchButton').addEventListener('click', reloadMarkers);
}

initMap();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#search {
  position: absolute;
  top: 150px;
  left: 10px;
  background-color: #fff;
  z-index: 999;
  padding: 20px;
}

#map {
  height: 100%;
  z-index: 1;
}

#markerInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  z-index: 999;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<div id="search">
  <input type="button" value="Search" id="searchButton">
</div>
<div id="markerInfo"></div>