I'm struggling to find a very simple example of how to add a marker(s) to a Google Map when a user left clicks on the map.
6 Answers
In 2017, the solution is:
map.addListener('click', function(e) { placeMarker(e.latLng, map); }); function placeMarker(position, map) { var marker = new google.maps.Marker({ position: position, map: map }); map.panTo(position); } 1 Comment
David Corral
I'm still getting upvoted in 2022, so I guess this is still working 😁
This is actually a documented feature, and can be found here
// This event listener calls addMarker() when the map is clicked. google.maps.event.addListener(map, 'click', function(e) { placeMarker(e.latLng, map); }); function placeMarker(position, map) { var marker = new google.maps.Marker({ position: position, map: map }); map.panTo(position); } Comments
To make the user able to add only once, and move the marker; You can set the marker on first click and then just change the position on subsequent clicks.
var marker; google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); function placeMarker(location) { if (marker == null) { marker = new google.maps.Marker({ position: location, map: map }); } else { marker.setPosition(location); } } Comments
Currently the method to add the listener to the map would be
map.addListener('click', function(e) { placeMarker(e.latLng, map); }); And not
google.maps.event.addListener(map, 'click', function(e) { placeMarker(e.latLng, map); }); Comments
The best method to add marker 'on-click' is:
map.addListener('click', function(event) { addMarker(event.latLng); }); 1 Comment
EvilDr
This simply repeats all the other answers.