Zoom to Markers using GeoJson GoogleMaps Api v3

Question

I am trying to set my view to the geojson data I loaded. Any hint?

That's my code so far:

<script>
//Load Map
    var map;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 2
        });
        map.data.loadGeoJson('Points.geojson');
    }
    google.maps.event.addDomListener(window, 'load', initialize);

//Json to Array
var myMarkers;
    $.getJSON('Points.geojson')
    .done(function (data) {
    myMarkers = data;
    });
</script>

As you can see I already loaded the Json in an Array - but I am not sure how to get the boundings. During my search I always came to this page: http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/ but unfortunatly I just started using Javascript and I wasn't able to modify my code.

And that's how my Geojson looks like:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "Name": "SiteA",
            "Adresse": "Adress1",
            "Hausnummer": 1,
            "Postleitzahl": 1000,
            "Ort": "Here",
            "Long": 10,
            "Lat": 50
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10, 50]
        }
    }, {
        "type": "Feature",
        "properties": {
            "Name": "SiteB",
            "Adresse": "Adress2:",
            "Hausnummer": 2,
            "Postleitzahl": 1001,
            "Ort": "There",
            "Long": 5,
            "Lat": 60
        },
        "geometry": {
            "type": "Point",
            "coordinates": [5, 60]
        }
    }]
}

Thanks in advance!

Answer 1

You got three points, so in a looop you extend them to a LatLngBounds like here then try fitbounds

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


for (var i = 0; i < data.features.length; ii++) {
            a = data.features[i].geometry.coordinates[0];
            b = data.features[i].geometry.coordinates[1];
            point = new google.maps.LatLng(a, b);
            bounds.extend(point);
        }


map.fitBounds(bounds)