Javascript – Google maps API V3 method fitBounds()

google mapsgoogle-maps-api-3javascript

I have this code that renders a map.

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(myPlace, Item_1);
map.fitBounds(bounds);

    }

Even if the two points are separated from 25 km I get this result:

enter image description here

While I would like to render a higher level zoom.

Like this

enter image description here

I use the method fitBounds()

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

Thanks for your support

Best Answer

This happens because LatLngBounds() does not take two arbitrary points as parameters, but SW and NE points

use the .extend() method on an empty bounds object

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

Demo at http://jsfiddle.net/gaby/22qte/

Related Topic