单击多个谷歌地图标记的自定义功能

Question

I'm trying to make a custom function for all the markers i loop trough. The issue ( i think ) is that i need to make the variable name markers with a incrementing number or something. My code is the following :

$(document).ready(function(){
initMap();
});

function testfunction(data){
    console.log(data);
}

function initMap() {
var myLatLng = {lat: -33.869490, lng: 151.201056};

var locations = [
  ['Bondi Beach', 'test', -33.890542, 151.274856, 4],
  ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: myLatLng
});

var marker, i;
for (i = 0; i < locations.length; i++) {  
    var marker[i] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        data : locations[i][1],
        title : locations[i][0],
    });
    console.log(marker[i].data); // <-- THIS WORKS
   marker[i].addListener('click', function() {
        console.log(marker[i].data); // <-- THIS DOES NOT WORK
       testfunction(marker.data);
    });  
}


}

EDITED!!!-- Changed testfunction(marker.data); TO testfunction(marker[i].data);

This gives an error : Cannot read propert 'data' of undefined.

But when i try to console log it without the eventlistener, it does work!

Answer 1

Here is the working js, i hope you can make sense out of it that how my code is working. I have added additionally infowindow for your markers as well so upon click you can see which maker you clicked. Basically instead of creating separate maker with index and on click event. I combined both jobs in your for loop. Also see the marker console log at the bottom. It shows that using for loop we created marker object each time.

EDIT: Fiddle example

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 map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));

        console.log(marker); // Object { __gm: Object, gm_accessors_: Object, position: Object, gm_bindings_: Object, map: Object, closure_uid_897990155: 16, clickable: true, visible: true, __e3_: Object }

    }

Answer 2

You could use a clousure

  $(document).ready(function(){
  initMap();
  });

  function testfunction(data){
      console.log(data);
  }

  function initMap() {
  var myLatLng = {lat: -33.869490, lng: 151.201056};


      var locations = [
        ['Bondi Beach', 'test', -33.890542, 151.274856, 4],
        ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: myLatLng
      });

      // add a closure for listener manage
       var addListenerToMarker = function(myMarker){
          myMarker.addListener('click', function() {
             testfunction(myMarker.data);
          }); 
      }

      // use a collection of markers for future use (hide/show..etc)
      var markers = [];
      var i;
      var marker;
      for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][2], locations[i][3]),
              map: map,
              data : locations[i][1],
              title : locations[i][0],
          });

        //push the marker in collectio
        markers.push(marker);
        // call the clousure
        addListenerToMarker(marker);

      }


  }