CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Wesleyvans
Wesleyvans

Reputation: 67

Custom function on click multiple google maps markers

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!

Upvotes: 1

Views: 1233

Answers (2)

Danish
Danish

Reputation: 1497

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 }

    }

Upvotes: 2

ScaisEdge
ScaisEdge

Reputation: 133400

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

      }


  }

Upvotes: 1

Related Questions