Google Maps Drawing Manager get position of clicked point

Question

I am using the Google Maps Drawing Manager to click different points to draw a polygon. Using this example: http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          markerOptions: {
            draggable: true
          },
          polylineOptions: {
            editable: true
          },
          rectangleOptions: polyOptions,
          circleOptions: polyOptions,
          polygonOptions: polyOptions,
          map: map
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);
            console.log('Overlay complete!!!');
            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;
            newShape.type = e.type;
            google.maps.event.addListener(newShape, 'click', function() {
              setSelection(newShape);
            });

            setSelection(newShape);
          }
        });

        // Clear the current selection when the drawing mode is changed, or when the
        // map is clicked.
        google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
        google.maps.event.addListener(map, 'click', clearSelection);
        google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

What I would like to do is get a click event every time I click my mouse to create a point on the map, and I would like to get the lat and lon of that clicked point on the map. Is this possible?

Or, alternately, could I export all of the points lat and lon after the polygon is created?

possible duplicate of [Get Array of all points of Polygon - Google Maps Drawing Tool API-3](http://stackoverflow.com/questions/30670080/get-array-of-all-points-of-polygon-google-maps-drawing-tool-api-3) — geocodezip, Apr 14 '16 at 04:29
The drawing manager takes over the click event on the map, so you wont be able to get the coordinates through the API until the polygon is complete. — geocodezip, Apr 14 '16 at 04:30
You can get the coordinates, just not from the map, the answers below that use the domListener on the map div work just fine- — chrismarx, Mar 31 '17 at 22:15

score 1 · Answer 1 · answered Apr 14 '16 at 22:06

1

Yes possible, please see below

var lat, lng; //global variables

function initialize() {
    ...
    ...


    //add these lines to capture latitude and longitude
    google.maps.event.addDomListener(document.getElementById('map'), 'mousemove', function(event) {

        var ll = overlay.getProjection().fromContainerPixelToLatLng(
                            new google.maps.Point(event.clientX, event.clientY));

        lat = ll.lat();
        lng = ll.lng();

        console.log(ll.lng() +", "+ll.lat());

    }); 
    ...
    ...
}

Now use these latitude (lat) and longitude (lng) variables in your click event or elsewhere :)

answered Apr 14 '16 at 22:06

Satya Prasad Sarilla

40
4

This is the correct answer, except you'll likely want the "click" event and not mousemove, and to make sure you're getting the right map coordinates from the div clientX/Y, see this post - http://stackoverflow.com/questions/25219346/how-to-convert-from-x-y-screen-coordinates-to-latlng-google-maps – chrismarx Mar 31 '17 at 22:17
Who is `overlay` from `overlay.getProjection()...`? – decebal Feb 14 '19 at 16:09

score 0 · Answer 2 · answered Apr 15 '16 at 06:16

JavaScript within the browser is event drive, javascript responds to interactions by generating events and expects a program to listen to interesting events. User events such as "click" mouse events are propagated from the DOM to the Google Maps JavaScript API.

In certain events will register JavaScript event listeners for those events and execute code when those events are received by calling addListener() to register event handlers on the object.

Here's a sample code snippet how to implement click event listener:

function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
});

// We add a DOM event here to show an alert if the DIV containing the
// map is clicked.
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
}

score -1 · Answer 3 · answered Apr 14 '16 at 15:32

-1

I was able to just get all of the coordinates after the shape was completed:

var vertices = selectedShape.getPath();
for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    xy.lat();// Latitude
    xy.lng();// Longitude
 }

answered Apr 14 '16 at 15:32

Nic Hubbard

41,587
63
251
412

This user is requesting to get the coordinates before the new overlay is returned – chrismarx Mar 31 '17 at 22:15

Google Maps Drawing Manager get position of clicked point

3 Answers3