I am trying to display a map on my website using this code:
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);
}
Although the two points are 25 km apart, the zoom level is not high enough for my liking. I want to render a higher zoom level.
To achieve this, I am using the fitBounds() method.
var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);
Any assistance or advice on how to improve this would be greatly appreciated. Thank you!