Home » Google, Javascript26 September 2017

Google Maps: Create New Marker on Clicking the Map

This article shows how to create a new marker whenever you click or double click on the Google Map.

In previous article, we had seen how we can Display Google Map with Marker when we have latitude and longitude value.

Here, we will be using the same code and adding a new functionality of displaying a new marker whenever users double click on the map. You can also add this functionality on “single click” instead of “double click” event. I will be showing both in the example code below.

If we are using double click event to create new marker, then we can disable zoom on double click. By default, the map zooms when you double click on it. You can disable this by using the option disableDoubleClickZoom: true.

Here is the full source code:

Note that: At the bottom of the code there is a script src included. You need to put your API Key over there like this:
https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap
You can get the API key from here: Get API Key

Hope this helps. Thanks.

Javascript

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed