On mouse click set marker with lat long

Question

On mouse click set marker with lat long

Closed this issue 5 years ago · 3 comments

Hi,

I would like to implement a python application that allows me to display a google (satellite) map and also create new markers on mouse click with the lat long of the marker. I am new to django so I would like to know if this is possible with this library before I start studying.

This javascript program below does exactly what I want. Also I have seen in one of the issues that someone said you can't zoom? Google map allows you to zoom with the mouse wheel etc or did they mean something else? Thanks for the help.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Google Map</title>
  <style>
    #map{
      height:400px;
      width:100%;
    }
  </style>
</head>
<body>
  <h1>My Google Map</h1>
  <div id="map"></div>
  <script>
    function initMap(){
      // Map options
      var options = {
        zoom:8,
        center:{lat:42.3601,lng:-71.0589}
      }

      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);

      // Listen for click on map
      google.maps.event.addListener(map, 'click', function(event){
        // Add marker
        addMarker({coords:event.latLng});
      });

      /*
      // Add marker
      var marker = new google.maps.Marker({
        position:{lat:42.4668,lng:-70.9495},
        map:map,
        icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
      });

      var infoWindow = new google.maps.InfoWindow({
        content:'<h1>Lynn MA</h1>'
      });

      marker.addListener('click', function(){
        infoWindow.open(map, marker);
      });
      */

      // Array of markers
      var markers = [
        {
          coords:{lat:42.4668,lng:-70.9495},
          iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          content:'<h1>Lynn MA</h1>'
        },
        {
          coords:{lat:42.8584,lng:-70.9300},
          content:'<h1>Amesbury MA</h1>'
        },
        {
          coords:{lat:42.7762,lng:-71.0773}
        }
      ];

      // Loop through markers
      for(var i = 0;i < markers.length;i++){
        // Add marker
        addMarker(markers[i]);
      }

      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,
          //icon:props.iconImage
        });

        // Check for customicon
        if(props.iconImage){
          // Set icon image
          marker.setIcon(props.iconImage);
        }

        // Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }
      }

  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=SOMEAPIKEY&callback=initMap">
    </script>
</body>
</html>

Answer 1 · 2019-12-06T14:08:18.000Z

Hi Patrick - This library's intent is to help you easily add google maps to the django admin. If you're just using maps on a page and your code above does exactly what you want, I'd recommend just putting your code in the page's template.

Answer 2 · 2019-12-06T21:49:11.000Z

Thanks, but I'm trying to write an app using python and I'm wondering if this library lets me call the javascript API from python. Thats why I asked. Using javascript is not an option for me at this time.

Answer 3 · 2019-12-18T12:31:42.000Z

Oh, I understand your question now. Sorry no, this library doesn't help with that.