google map geocoding longlat

Question

I have this code

STYLE

<style>
#map_canvas {
    width:100%;
    height:100%;
}
</style>

JQUERY

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<script>

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
      ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
      ['313 North Highland Ave NE, Atlanta, GA 30307'],
      ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
      ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });

        });
    }

});
</script>

HTML

<div id="map_canvas"></div>

as of the moment what the code does is giving pointers with the specific addresses, but i want to make something like i want to auto center in the map which can see all the pointers, but i cant seem to figure out the solution about the "center" or how to do it so that it'll auto center to see all the pointers.

Thanks.

Answer 1

Use google.maps.LatLngBounds. Add all the marker positions to it, then call google.maps.Map.fitBounds on the result.

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
        ['313 North Highland Ave NE, Atlanta, GA 30307'],
        ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
        ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            bounds.extend(latlng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
            map.fitBounds(bounds);
        });
    }

});

working code snippet:

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ['4355 Ashford Dunwoody Road NE, Atlanta, GA 30346, US'],
        ['313 North Highland Ave NE, Atlanta, GA 30307'],
        ['1989 Cheshire Bridge Road, Atlanta, GA 30324, US'],
        ['1210 Howell Mill Rd NW, Atlanta, GA 30318, US']
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            bounds.extend(latlng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
            map.fitBounds(bounds);
        });
    }

});

html, body, #map_canvas {
    width:100%;
    height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas"></div>