Center map with more than 1 (one) marker

Question

I’d like a little help if possible.

I am developing a website, and implementing Google Maps V3 Javascript functions, but I have not found in any documentation on how to center the map containing 2 or more markers.

Do not center on 1 (one) marker, but center on the markers equally, applying the zoom automatically, etc...

I think I made it clear, if anyone can help me, I’d appreciate it...

UPDATING

I found the answer in the link that the friend luciorubeens left in the comments... https://stackoverflow.com/questions/15719951/google-maps-api-v3-auto-center-map-with-multiple-markers

Answer 1

Instead of using two dots or more, use the LatLngBounds() to center the map.

API-

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

-js

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(45.4555729, 9.169236),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        panControl: true,
        mapTypeControl: false,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: false,
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };
    var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);



    var Item_1 = new google.maps.LatLng(45.5983128, 8.9172776);

    var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

    var marker = new google.maps.Marker({
        position: Item_1,
        map: map
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    var bounds = new google.maps.LatLngBounds();
    bounds.extend(myPlace);
    bounds.extend(Item_1);
    map.fitBounds(bounds);

}
initialize();

-css

#mapCanvas{width:500px;height:300px;}

html -

<div id="mapCanvas"></div>

WATCH IT WORK: http://jsfiddle.net/gaby/22qte/