Innovate anywhere, anytime withruncode.io Your cloud-based dev studio.
Django

Dynamically Adding Google Maps with Marker In Django

2023-06-17

Google Maps allows you to display maps on your website,  we can also customize maps, and the information on maps.

The Google Maps API is a JavaScript library. It can be added to a web page with the following script tags:

We are creating a div to holds the google map. Here we are also giving an option to search the place on a google map.

then add a DOM listener that will execute the getGoogleMap() function on window load (when the page is initially loaded):

google.maps.event.addDomListener(window, "load", getGoogleMap)

In the above example, we are already loading 3 markers in Bangalore, Chennai, Hyderabad.

Then again if a user marks any location, it will display the marker with longitude, latitude of the place(if u want to store) by deleting user previously selecting markers.

We can also set the position description dynamically using the info window