Question

I wonder whether someone may be able to help me please.

I’m using this page to allow users to view markers saved in a MySQL database and to geocode/reverse geocode new marker positions.

I’m able to correctly center the map on the marker which is being loaded from the database, but the problem I’m having is that the map zooms in to it’s maximum setting, whereas I would like to be able to set this manually.

I’ve tried adding another zoom control into my script here:

// add marker
var bounds = new google.maps.LatLngBounds(); 
var loc = new google.maps.LatLng(las[i],lgs[i]);
var marker = new google.maps.Marker({
position: loc, 
map: window.map,
zoom: 8,
title: nms[i]
});
bounds.extend(loc);
map.fitBounds(bounds);

Unfortunately this has no affect. I appreciate that to some this may be a very minor fix, but I’ve been looking at this for sometime and I just can’t seem to find a solution.

I just wondered whether someone may be able to look at this please and let me know where I’ve gone wrong?

POST UPDATE

I have worked out a solution using exisitng code and that suggested by @Andrew Leach. The working solution is:

// add marker
var bounds = new google.maps.LatLngBounds(); 

var loc = new google.maps.LatLng(las[i],lgs[i]);
var marker = new google.maps.Marker({
position: loc, 
map: window.map,            
title: nms[i]
});
bounds.extend(loc);
map.fitBounds(bounds);
map.setZoom(16);

Answer 1

Remove the references to the bounds.

You add a marker to the map, and create a LatLngBounds object which contains only that single point. You then ask the map to zoom in to fit the bounds into the map’s viewport. Fitting a single location into the viewport will always zoom in as far as it can, and even then a single point can never fill the entire viewport.

However, adding zoom to the marker options won’t work either, because zoom is not a valid option. Documentation

Instead, set the map’s zoom explicitly, either with map.setZoom(8) or by including the zoom option in the map’s options when you set it up.