How to copy and scale a Shape using the Google Maps Javascript API drawing library?

Question

I'm creating a Google Map in my React application, where I would like the user to be able to draw shapes, with an additional functionality being that once a user finishes drawing a shape, an additional shape must be added to it as an outline, as shown in the images below:

User drawn shape:

Functionality I'm aiming to add, right after the user finishes drawing the shape:

I'm using the drawing library of Google Maps as shown here: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

Here is the relevant code I'm using:

    // When a circle is drawn
    google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
      let tempCirc = new google.maps.Circle({ 
        radius: circle.getRadius()*2, 
        center: circle.getCenter(),
        editable: true,
        map: map
      })
    });

   // When a rectangle is drawn
   google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rect) {
      let tempRect = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          editable: true,
          draggable: true
        })

      rectangle.setBounds(
        new google.maps.LatLngBounds(
          new google.maps.LatLng(
            rect.getBounds().getSouthWest().lat() - .005, 
            rect.getBounds().getSouthWest().lng() - .005*2
          ),
          new google.maps.LatLng(
            rect.getBounds().getNorthEast().lat() + .005, 
            rect.getBounds().getNorthEast().lng() + .005*2
          ),
        )
      )
    });

    // When a polygon is drawn
    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
      // What can I do here?
    });

If there is any other way to do this on a Google map, please let me know too.

That sounds like a difficult task. Might be feasible for a simple Polygon like your image shows. But what about complex Polygons with intersections, holes, etc.? — MrUpsidown, Jul 23 '19 at 10:12
Thanks for looking into it. For my use case, any leads in the direction of even a simple polygon would suffice. — Anurag Srivastava, Jul 23 '19 at 10:14
Which won't prevent your users from drawing another shape and have unexpected results... that said I haven't got any ready solution for that, even for a simple Polygon. — MrUpsidown, Jul 23 '19 at 10:17
You could... create a bounds object and add each of your polygon points to it, then find the center point. Then with the geometry library, use the interpolate method to calculate the new polygon points based on the original polygon points + some distance fraction. That will work, more or less, for very basic shapes, but will get you weird results as soon as you try it with complex shapes. — MrUpsidown, Jul 23 '19 at 11:07

score 2 · Accepted Answer · answered Jul 24 '19 at 06:18

Thanks to the suggestion by @MrUpsidown, I was able to use the interpolate() method from google.maps.geometry.spherical namespace.

By providing a fraction greater than 1, I was able to get points to form an outer polygon. The method works for fairly simple polygons without holes. Hope it helps someone.

// getCenter() for Polygon
google.maps.Polygon.prototype.getCenter = function(){
  var arr = this.getPath().getArray()
  , distX = 0, distY = 0
  , len = arr.length

  arr.forEach(function (element, index) { 
    distX+= element.lat()
    distY+= element.lng()
  });

  return new google.maps.LatLng(distX/len, distY/len);
}

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
  let polyCenter = poly.getCenter()
  , innerShapePoints = poly.getPath().getArray()
  , outerShapePoints = []

  outerShapePoints = innerShapePoints.map(point => {
    return google.maps.geometry.spherical.interpolate(polyCenter, point, 1.5)
  })

  let outerPolygon = new google.maps.Polygon({
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    map: map,
    editable: true,
    suppressUndo: true,
    draggable: true,
    path: outerShapePoints
  })
})

How to copy and scale a Shape using the Google Maps Javascript API drawing library?

1 Answers1