Markers Events Click Google Maps

Question

There is a Google Map on which points are uploaded as markers. It is necessary to make the route construction by points: Click on the point with the right mouse button and the point is added to the route. I do not understand how to make the handler of mouse click events by the array of objects on the map. On the Yandex Maps it is done like this:

myMap.geoObjects.events.add ('contextmenu', function (e) {})

And what about Google maps? The idea should be something like this:

google.maps.Marker.addListener ('rightclick', function (e) {})

But this method does not work. How can I implement event handling? enter image description here

rafon · Accepted Answer · 2017-10-19 09:11:22Z

I assume your points are already in array. If so, all you need to do is just iterate to each point in your array and create a new instance of Google Marker and fill in the properties (you can check here for Google Marker documentation). Then in each Marker, attach a listener that when 'rightclick' is clicked, it will add a new destination on your route. For more info about events, please check this documentation.

Here's a sample implementation:

<div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> <script type="text/javascript"> function initMap(){ var sampleCoords = [ { lat:14.599512, lng:120.98422 },{ lat:14.554729, lng:121.024445 },{ lat:14.579444, lng:121.035917 } ]; var options = { center : { lat: 14.5995, lng:120.9842 }, zoom : 10, streetViewControl : false }; var map = new google.maps.Map( document.getElementById('map'), options); for ( var key in sampleCoords ) { sampleCoords[key] = new google.maps.Marker({ position : new google.maps.LatLng( sampleCoords[key].lat,sampleCoords[key].lng ), map : map, title : 'test' }); sampleCoords[key].addListener('rightclick', function(params){ alert('Right clicked!') }); } } </script>

Working demo here

<!DOCTYPE html> <html> <head> <title>Add Route to Map Onclick</title> <style type="text/css"> html,body,#map { width:100%; height:100%; } </style> </head> <body> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"></script> <script type="text/javascript"> function initMap(){ var sampleCoords = [ { lat:14.599512, lng:120.98422 },{ lat:14.554729, lng:121.024445 },{ lat:14.579444, lng:121.035917 } ]; var options = { center : { lat: 14.5995, lng:120.9842 }, zoom : 10, streetViewControl : false }; var map = new google.maps.Map( document.getElementById('map'), options); for ( var key in sampleCoords ) { sampleCoords[key] = new google.maps.Marker({ position : new google.maps.LatLng( sampleCoords[key].lat,sampleCoords[key].lng ), map : map, title : 'test' }); sampleCoords[key].addListener('rightclick', function(params){ alert('Right clicked!'); }); } } </script> </body> </html>

Hope it helps!

If it helped, please consider accepting/upvoting my answer. Thanks :)

Collectives™ on Stack Overflow

Markers Events Click Google Maps

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related