CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Lipsyor
Lipsyor

Reputation: 438

How to get the fired marker using event.addListener with Google Map API v3

I have a simple Google Map with some markers added looping on a json object.

I'm trying to add a listener to all of these markers to do a simple action (change the rotation). Markers are added on map and listener is called, but when i click on one of the markers, the action is performed always on the latest added.

How I can get the fired marker? I think that the way is to use the evt parameter of the listener function, but I don't know how.

I watched inside the evt parameter with firebug but without results.

Here is the code:

for(var i in _points){

    _markers[i] = new google.maps.Marker({

        position: {
            lat: parseFloat(_points[i]._google_lat),
            lng: parseFloat(_points[i]._google_lon)
        },

        icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 3,
            rotation: parseInt(_points[i]._rotation)
        },

        map: _map,

        title: _points[i]._obj_id
    });

    google.maps.event.addListener(_markers[i], 'click', function(evt){

        //console.log(evt);

        r = _markers[i].icon.rotation;

        _markers[i].setIcon({
             path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
             scale: 3,
             rotation: r+15
        });
     });

}

Upvotes: 1

Views: 198

Answers (1)

geocodezip
geocodezip

Reputation: 161334

The this inside the click listener function is a reference to the marker:

google.maps.event.addListener(_markers[i], 'click', function(evt){
    //console.log(evt);
    r = this.getIcon().rotation;
    this.setIcon({
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
         scale: 3,
         rotation: r+15
    });
 });

proof of concept fiddle

code snippet:

function initMap() {

  // Create a map and center it on Manhattan.
  var _map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 40.771,
      lng: -73.974
    }
  });

  for (var i in _points) {

    _markers[i] = new google.maps.Marker({

      position: {
        lat: parseFloat(_points[i]._google_lat),
        lng: parseFloat(_points[i]._google_lon)
      },
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 3,
        rotation: parseInt(_points[i]._rotation)
      },
      map: _map,
      title: _points[i]._obj_id
    });

    google.maps.event.addListener(_markers[i], 'click', function(evt) {

      r = this.getIcon().rotation;

      this.setIcon({
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 3,
        rotation: r + 15
      });
    });

  }
}

google.maps.event.addDomListener(window, "load", initMap);

var _markers = [];
var _points = [{
  _google_lat: 40.7127837,
  _google_lon: -74.0059413,
  _obj_id: "A",
  _rotation: 0
}, {
  _google_lat: 40.735657,
  _google_lon: -74.1723667,
  _obj_id: "B",
  _rotation: 90
}]
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Upvotes: 1

Related Questions