Search code examples
javascriptgoogle-mapsbounding-box

Get bounding box with Google Maps Api Js


How can I get the bounding box of a polygon in google maps api? With open layers if I could achieve it, but not with google maps.

I need to get the boundig box to be able to manipulate an intersection with JSTS by increasing or reducing the size of the bounding box.

enter image description here

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var bermudaCoords = [
    { lat: 25.774, lng: -80.190 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.190 }
  ];

  // Construct the polygon. //triangulo azul
  var bermudaTriangle = new google.maps.Polygon({
    paths: bermudaCoords,
    strokeColor: '#0404B4',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0404B4',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Construct another polygon.
  var anotherCoords = [
    { lat: 25.774, lng: -85.101 },
    { lat: 35.406, lng: -85.101 },
    { lat: 35.406, lng: -54.127 },
    { lat: 25.774, lng: -60.010 }
  ];

//poligono amarillo
  var anotherArea = new google.maps.Polygon({
    paths: anotherCoords,
    strokeColor: '#FFFF00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFFF00',
    fillOpacity: 0.35
  });
  anotherArea.setMap(map);



  //calc polygons intersection
  var geometryFactory = new jsts.geom.GeometryFactory();
  var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
  var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
  var intersection = bermudaPolygon.intersection(anotherPolygon);
  drawIntersectionArea(map, intersection);
}



function drawIntersectionArea(map, polygon) {
  var coords = polygon.getCoordinates().map(function (coord) {
    return { lat: coord.x, lng: coord.y };
  });

//area de interseccion rosa
  var intersectionArea = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FE2EF7',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#FE2EF7',
    fillOpacity: 0.35
  });
  intersectionArea.setMap(map);
}



function createJstsPolygon(geometryFactory, polygon) {
  var path = polygon.getPath();
  var coordinates = path.getArray().map(function name(coord) {
    return new jsts.geom.Coordinate(coord.lat(), coord.lng());
  });
  coordinates.push(coordinates[0]);
  var shell = geometryFactory.createLinearRing(coordinates);
  return geometryFactory.createPolygon(shell);
}
#map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

https://jsfiddle.net/vgrem/3ukpuxq9/


Solution

  • The function below will compute the bounds of a google.maps.Polygon

    function polygonBounds(polygon) {
       var bounds = new google.maps.LatLngBounds();
       for (var i=0; i<polygon.getPaths().getLength(); i++) {
         for (var j=0; j<polygon.getPaths().getAt(i).getLength(); j++) {
            bounds.extend(polygon.getPaths().getAt(i).getAt(j));
         }
       }
       return bounds;
    }
    

    proof of concept fiddle

    enter image description here

    code snippet:

    function polygonBounds(polygon) {
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < polygon.getPaths().getLength(); i++) {
        for (var j = 0; j < polygon.getPaths().getAt(i).getLength(); j++) {
          bounds.extend(polygon.getPaths().getAt(i).getAt(j));
        }
      }
      return bounds;
    }
    
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {
          lat: 24.886,
          lng: -70.268
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
    
      // Define the LatLng coordinates for the polygon's path.
      var bermudaCoords = [{
          lat: 25.774,
          lng: -80.190
        },
        {
          lat: 18.466,
          lng: -66.118
        },
        {
          lat: 32.321,
          lng: -64.757
        },
        {
          lat: 25.774,
          lng: -80.190
        }
      ];
    
      // Construct the polygon.
      var bermudaTriangle = new google.maps.Polygon({
        paths: bermudaCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      bermudaTriangle.setMap(map);
      var triBnds = new google.maps.Rectangle({
        map: map,
        bounds: polygonBounds(bermudaTriangle)
      })
    
      // Construct another polygon.
      var anotherCoords = [{
          lat: 25.774,
          lng: -85.101
        },
        {
          lat: 35.406,
          lng: -85.101
        },
        {
          lat: 35.406,
          lng: -54.127
        },
        {
          lat: 25.774,
          lng: -60.010
        }
      ];
    
      var anotherArea = new google.maps.Polygon({
        paths: anotherCoords,
        strokeColor: '#0000FF',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#0000FF',
        fillOpacity: 0.35
      });
      anotherArea.setMap(map);
      var otherBnds = new google.maps.Rectangle({
        map: map,
        bounds: polygonBounds(anotherArea)
      })
    
    
    
      //calc polygons intersection
      var geometryFactory = new jsts.geom.GeometryFactory();
      var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
      var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
      var intersection = bermudaPolygon.intersection(anotherPolygon);
      drawIntersectionArea(map, intersection);
    }
    
    
    
    function drawIntersectionArea(map, polygon) {
      var coords = polygon.getCoordinates().map(function(coord) {
        return {
          lat: coord.x,
          lng: coord.y
        };
      });
    
      var intersectionArea = new google.maps.Polygon({
        paths: coords,
        strokeColor: '#00FF00',
        strokeOpacity: 0.8,
        strokeWeight: 4,
        fillColor: '#00FF00',
        fillOpacity: 0.35
      });
      intersectionArea.setMap(map);
    }
    
    
    
    function createJstsPolygon(geometryFactory, polygon) {
      var path = polygon.getPath();
      var coordinates = path.getArray().map(function name(coord) {
        return new jsts.geom.Coordinate(coord.lat(), coord.lng());
      });
      coordinates.push(coordinates[0]);
      var shell = geometryFactory.createLinearRing(coordinates);
      return geometryFactory.createPolygon(shell);
    }
    
    
    google.maps.event.addDomListener(window, 'load', initMap);
    #map,
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
    <script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>
    <div id="map"></div>