Google Maps Api V3 : Event Listener On A Class

It is possible to detect an event with Google Maps V3 API, for instance (ex 1) : google.maps.event.addListener('drag', function(event) { $('#latD').val(event.latLng.

Solution 1:

If you have got multiple markers and are trying to create an event for each each marker, in this case the dragend event, you would need to include it in the for loop which generates your markers.

The snippet below assumes you are trying to get the longitude and latitude of a marker after it has been dragged. These values get inserted into the input boxes below the map.

#map {
  height: 250px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="map"></div><inputid="latD"type="text"><inputid="longD"type="text"><script>// The following map creates complex markers to indicate destinations// Note that the anchor is set to (0,32) to correspond to the base of the iamge.functioninitMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
    center: {lat: -2.75181, lng: 24.11768}
  });

    setMarkers(map);
  }

  // Data for the markers consisting of a name, a LatLng and a zIndex for the// order in which these markers should display on top of each othervar destinations = [
    ['Congo', -2.72760, 23.52084, 1],
    ['South Africa', -33.58880, 20.07114, 1],
    ['Brazil', -6.26352, -57.38128, 1]
  ];

  functionsetMarkers(map) {
    // Adds markers to the map.// Marker sizes are expressed as a Size of X,Y where the origin of the image// (0,0) is located in the top left of the image.// Origins, anchor positions and coordinates of the marker increase in the X// direction to the right and in the Y direction down.var image = {
      url: 'http://i.imgur.com/OG4CZt3.png',
      // This marker is 32 pixels wide by 32 pixels high.size: new google.maps.Size(32, 32),
      // The origin for this image is (0, 0).origin: new google.maps.Point(0, 0),
      // The anchor for this image is just off centre (0, 10).anchor: new google.maps.Point(0, 10)
    };
    // Shapes define the clickable region of the icon. The type defines an HTML// <area> element 'poly' which traces out a polygon as a series of X,Y points.// The final coordinate closes the poly by connecting to the first coordinate.var shape = {
      coords: [1, 1, 1, 32, 30, 32, 30, 1],
      type: 'poly'
    };
    
    for (var i = 0; i < destinations.length; i++) {
      var destination = destinations[i];
      var marker = new google.maps.Marker({
          position: {lat: destination[1], lng: destination[2]},
          map: map,
          draggable: true,
          icon: image,
          shape: shape,
          animation: google.maps.Animation.DROP,
          title: destination[0],
          zIndex: destination[3],
      });

      marker.addListener('dragend', function() {
          jQuery("#latD").val(this.getPosition().lat()); 
          jQuery("#longD").val(this.getPosition().lng()); 
      });
    }
}
</script><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>

More informationin the docs