CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3geometry
jokarl
jokarl

Reputation: 2225

Google Maps API v3: Getting geometry of a drawn shape

I'm currently working with the Google Maps API v3.13. I have come to a halt in my coding though and the documentation doesn't really help me anymore.

What I have done is that I've implemented the DrawingLibrary and I can draw shapes on the map. What I would like to do when I've finished drawing something, is to get the bounding box/corners of the shape that was drawn (I have only activated polyline and rectangle).

I then want to use this area to see if any markers are within it, and then make them "bouncy" or something similar. So my question is, how do I get the area that the user drew? In which format is this data? Coordinates for each corner? Do I have to combine the functionality of the DrawingLibrary with the GeometryLibrary to do this?

I have checked these documentations but still haven't been able to find a solution. https://developers.google.com/maps/documentation/javascript/geometry https://developers.google.com/maps/documentation/javascript/drawing

This is what I have so far:

function bindOverlayFinishedEvents() {
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.POLYGON) {
        //bounds = event.overlay.getBounds();
    }
    else if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
        //bounds = event.overlay.getBounds();
    }
});

}

Any help would be greatly appreciated!

Upvotes: 1

Views: 4029

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

Since your goal is to determine whether markers are located within an area, the below examples demonstrate how to accomplish it depending on the shape type:

  • for circle: circle.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(circle.getCenter(), latLng) <= circle.getRadius()
  • for rectangle: rectangle.getBounds().contains(latLng)
  • for polygon: google.maps.geometry.poly.containsLocation(latLng,polygon)

Wrapper function to determine whether point is located inside a shape:

//wrapper for contains function 
var shapeContains = function (shape, latLng) {
    if (shape instanceof google.maps.Circle)
        return shape.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(shape.getCenter(), latLng) <= shape.getRadius();
    else if (shape instanceof google.maps.Rectangle)
        return shape.getBounds().contains(latLng);
    else if(shape instanceof google.maps.Polygon)
        return google.maps.geometry.poly.containsLocation(latLng, shape);
    else 
        throw new Error("contains is not supported for this type of shape");
}

Codepen (demo)

Upvotes: 3

Related Questions