Custom function on click multiple google maps markers

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!

I think you need to declare marker as an array on the line above your for loop. var marker = array(); — Barry Thomas
– Barry Thomas, Commented Mar 9, 2017 at 14:23
I tried to swap it out for this but gave an error unidentified array. — Wesleyvans
– Wesleyvans, Commented Mar 9, 2017 at 14:25
Also tried it to swap it with var marker = []; then remove the var before var marker[i] and this made it to where it gave back an unidentified data (at the testfunction) — Wesleyvans
– Wesleyvans, Commented Mar 9, 2017 at 14:26

Danish · Accepted Answer · 2017-03-09 14:46:36Z

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 }

    }

ScaisEdge · Accepted Answer · 2017-03-09 14:42:11Z

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);

      }


  }

Collectives™ on Stack Overflow

Custom function on click multiple google maps markers

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related