-1

I got the Google Map and Drawing Tools displayed on the map. I can draw the shapes (circle, polygon, rectangle ...) on the map. For the start I am using the example code from Google Maps JavaScript get started page: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/drawing-tools

I was able to find a lot of examples on have to draw/make a shape object by providing all the properties and LatLng.

How do I get a LatLng for the shape that I just draw by using one of the drawing tools form Drawing Tools toolbar?

I am planing to make an application which will allow user to draw shapes on the map and save the LatLng in to database (i will be using MySql), so later the shape can be displayed again on the map as per request. Please help.

Guntar
  • 473
  • 8
  • 23
  • 1
    related question: [Get Array of all points of Polygon - Google Maps Drawing Tool API-3](https://stackoverflow.com/questions/30670080/get-array-of-all-points-of-polygon-google-maps-drawing-tool-api-3) – geocodezip Nov 04 '19 at 17:03
  • 1
    possible duplicate of [Google Maps Draw Tool outputting polygon coordinates](https://stackoverflow.com/questions/35214989/google-maps-draw-tool-outputting-polygon-coordinates) – geocodezip Nov 04 '19 at 17:10

1 Answers1

2

There are a few ways to get the coordinates of the shapes you draw on the map. Specifically for polygons you can add an event listener to the map like so. The easiest way is to add an event listener to the map for when a polygon is finished drawing.

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  const coords = polygon.getPath().getArray().map(coord => {
    return {
      lat: coord.lat(),
      lng: coord.lng()
    }
  });

  console.log(JSON.stringify(coords, null, 1));

  // SAVE COORDINATES HERE
});

Each type of drawing has a different format for saving so for something like circles you'd do

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  const radius = circle.getRadius();

  // Save circle here
});

You also have the option of adding an event to listen for all of the events by listening to the overlaycomplete event but in that case you'd have to handle the different types inside the event.

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    // Handle Circle using event.overlay
  }

  if (event.type == 'polygon') {
    // Handle Polygon using event.overlay
  }
});

Here's an example: https://jsfiddle.net/juop8q3n/1/

And here's my sources:

EDIT

Another way I've seen people save the data is by adding an event listener to the map to get the GeoJSON data, which is a standard format for saving drawing data.

Link: http://jsfiddle.net/y89rbfLo/

Chris Sandvik
  • 1,787
  • 9
  • 19
  • 1
    The basic guides for the Google Maps API can be good for a start but if you really want to build an application with them, you're going to have to look through the documentation reference for the nitty gritty details. That's the second source link I added. – Chris Sandvik Nov 04 '19 at 16:39
  • 1
    Thank you @Chris Sandvik, this helped me a lot. I am a beginner, your reply helped me tremendously. – Guntar Nov 04 '19 at 17:45
  • HI @Chris Sandvik, I got one followup question: `if (event.type == 'polygon') { // Handle Polygon using event.overlay }` is `event.overlay` the same as `new google.maps.Polygon` ? I am struggling to figure out on how to listen for and get lat & lng, after shape has been modified. Any suggestions, thank you. – Guntar Nov 05 '19 at 18:42
  • I would like to get the updated lat lng for the polygon similar like here: https://codepen.io/jhawes/pen/ujdgK But so far I haven't been able to figure out how do I get thies functionality from `event.overlay`, is that possible? – Guntar Nov 05 '19 at 19:19