center and fit boundaries of geojson multiple polygon data

Question

I am trying to center and fit the boundaries of multiple geojson polygon features on my google.maps.Map.

See this non geojson fiddle recreating the effect i'm after.

Is there an easy Google Map API 3 function to do this for geojson data?

See my code below and fiddle here

var map;

window.initMap = function() {

    var mapProp = {
        center: new google.maps.LatLng(51.8948201,-0.7333298),
        zoom: 17,
        mapTypeId: 'satellite'
    };

    map = new google.maps.Map(document.getElementById("map"), mapProp);

    map.data.loadGeoJson('https://api.myjson.com/bins/g0tzw');

    map.data.setStyle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    var bounds = new google.maps.LatLngBounds();

    map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());

}

I need expert pointers on cleanest and best way approach this.

See working demo of my code above in fiddle.

http://jsfiddle.net/joshmoto/fe2vworc/

I've included my geojson inline so you can see the polygons on the map.

Answer 1

Here is a quick example of how you can get your features bounds. This will just get each feature bounds, extend a LatLngBounds object and then fit the map with these bounds.

let map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 10,
    center: {
      lat: 0,
      lng: 0
    }
  });

  const permits = {
    type: "FeatureCollection",
    id: "permits",
    features: [{
        type: "Feature",
        properties: {
          name: "Alpha Field"
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-0.72863, 51.895995],
              [-0.730022, 51.896766],
              [-0.730754, 51.896524],
              [-0.731234, 51.896401],
              [-0.731832, 51.896294],
              [-0.732345, 51.896219],
              [-0.732945, 51.896102],
              [-0.732691, 51.895774],
              [-0.732618, 51.895531],
              [-0.732543, 51.895359],
              [-0.73152, 51.894751],
              [-0.731037, 51.894488],
              [-0.730708, 51.894324],
              [-0.72863, 51.895995]
            ]
          ]
        }
      },
      {
        type: "Feature",
        properties: {
          name: "Beta Field"
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-0.728004, 51.895658],
              [-0.72863, 51.895995],
              [-0.730708, 51.894324],
              [-0.731217, 51.893784],
              [-0.730992, 51.893709],
              [-0.730793, 51.893567],
              [-0.730734, 51.893435],
              [-0.730761, 51.89333],
              [-0.729696, 51.893244],
              [-0.729391, 51.89314],
              [-0.729249, 51.893586],
              [-0.728991, 51.894152],
              [-0.728525, 51.894983],
              [-0.728004, 51.895658]
            ]
          ]
        }
      }
    ]
  };

  google.maps.event.addListenerOnce(map, 'idle', function() {

    // Load GeoJSON.
    map.data.addGeoJson(permits);

    // Create empty bounds object
    let bounds = new google.maps.LatLngBounds();

    // Loop through features
    map.data.forEach(function(feature) {

      let geo = feature.getGeometry();

      geo.forEachLatLng(function(LatLng) {

        bounds.extend(LatLng);
      });
    });

    map.fitBounds(bounds);
  });
}

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>