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:
While I would like to render a higher level zoom.
Like this
I use the method fitBounds()
var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);
Thanks for your support
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/