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>

Answer 2

Props to @MrUpsidown for providing the working method to fitBounds.

I'm posting this answer to show my final solution based on @MrUpsidown answer using GeoJson data via loadGeoJson()

Here is my readable GeoJson here http://myjson.com/g0tzw

// initiate map
window.initMap = function() {

    // permits json
    var permits = 'https://api.myjson.com/bins/g0tzw';

    // map properties
    var mapProp = {
        zoom: 17,
        mapTypeId: 'satellite'
    };

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

    // load GeoJSON.
    map.data.loadGeoJson(permits, null, function () {

        // create empty bounds object
        var bounds = new google.maps.LatLngBounds();

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

            var geo = feature.getGeometry();

            geo.forEachLatLng(function(LatLng) {
                bounds.extend(LatLng);
            });

        });

        // fit data to bounds
        map.fitBounds(bounds);

    });

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

}

I'm calling initMap via...

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=<?=$gmap_api?>&callback=initMap"></script>

See working demo here.

http://jsfiddle.net/joshmoto/eg3vj17m/