GMAP - Multiple Markers Zoom Pan

by bizamajig

HTML

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

CSS

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

JavaScript

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();