Draw a smaller Polygon inside a Polygon using Google Maps

Question

I am trying to render shapes on Google Maps (using V3 of the API), which contain the same shape, just smaller inside. Basically a box within a box or a polygon within a polygon.

For the rectangle I have the following code, which works:

var drawEdgesRectangle = function (shape) {
  // shape is the original, parent rectangle

  var NE, SW, childNE, childSW, padding, diagonal, inner;

  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 1;

  // get diagonal distance from corner
  diagonal = Math.sqrt(2) * padding;

  // get NE of parent
  NE = shape.bounds.getNorthEast();

  // get SW of parent
  SW = shape.bounds.getSouthWest();

  // get child NE, SW
  childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
  childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);

  // render inner shape
  inner = new google.maps.Rectangle({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      childSW,
      childNE
    )
  });
}

Of course, doing this for a polygon is a different kettle of fish. I know I can use getPaths() to get the attributes of each line, but working out how to place the inner lines, and indeed, work out where 'inside' is is proving to be conceptually quite difficult for me.

I would like to know if what I want to achieve is possible given the Google API.

How complex are the polygons you need to do this on? Are they arbitrary? — geocodezip, Sep 24 '14 at 00:15
Ideally I would like to accept any type of polygon. In reality problem unlikely to consist of > 10 lines. — Darwin Tech, Sep 24 '14 at 00:18
The number of lines/vertices is not the real measure of complexity. Can there be any concave sides? Is the center of the polygon inside the polygon? If so (and there are no concave edges) you should be able to do something similar to what you are doing for the rectangle. — geocodezip, Sep 24 '14 at 00:40
[Proof of concept with pentagon](http://jsfiddle.net/1e648mpk/) — geocodezip, Sep 24 '14 at 02:32

geocodezip · Accepted Answer · 2017-05-24T23:13:25.637

One option if you polygons are "simple" (the center is "inside" the polygon and there are no concave sides), would be to do something similar to what you did with the rectangle (which is a four sided polygon that meets those criteria):

Using the geometry library:

To include it:

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

Code (assumes global "poly" and others):

var drawEdgesPoly = function() {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 50;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

proof of concept fiddle Play with the polygon in the code snippet or the jsfiddle to see the constraints.

var map;
var infoWindow;
var poly;
var inner;
var polylines = [];
var centerMarker;

var paths = [
  [
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)
  ]
];

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(38.8714, -77.0556),
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  poly = new google.maps.Polygon({
    paths: paths,
    strokeWeight: 3,
    fillColor: '#55FF55',
    fillOpacity: 0.5,
    editable: true
  });

  poly.setMap(map);
  drawEdgesPoly();

  google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);

  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}

google.maps.event.addDomListener(window, 'load', initialize);

var drawEdgesPoly = function() {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 50;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas" style="height:100%; width:100%;"></div>

Draw a smaller Polygon inside a Polygon using Google Maps

1 Answers1

Linked