Google Maps help

Auto zoom

[gosman]

I'm using the following code to insert a map on my pages and set the zoom level so all points can be seen. This works perfect when viewed in Firefox and Safari. However I noticed today in IE8 the zoom level does not get set. I must admit I'm not that good with Javascript so am hoping someone can help.

Thank you in advance.

var map1;

function map1_initialize() {
if (GBrowserIsCompatible()) {
var latlng1 = [
[new GLatLng(53.29094,-6.36829), '<div align="center"><a href="/blah.htm">Blah</a><br/><br/><img alt="" title="blah" src="blah.jpg"/></div>'],
[new GLatLng(53.352,-6.25455), '<div align="center"><a href="/blah1.htm">Blah 1</a><br/><br/><img alt="" title="blah 1" src="blah1.jpg"/></div>'],];
var latlngbounds = new GLatLngBounds();
var icon = new GIcon();
icon.image = "/images/widget.png";
icon.shadow = "/images/widgetshadow.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(9, 34);
icon.infoWindowAnchor = new GPoint(9, 2);
map1 = new GMap2(document.getElementById('widgetMap'));
map1.addControl(new GSmallMapControl());
map1.addControl(new GMenuMapTypeControl());
map1.setCenter(new GLatLng(0,0), 0);
for (var i = 0; i < latlng1.length; i++) {
(function () {
var marker = new GMarker(latlng1[i][0],icon);
var html = latlng1[i][1];
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
map1.addOverlay(marker);
latlngbounds.extend(latlng1[i][0]);
})();
}
map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds));
}
}
GEvent.addDomListener(window, 'load', map1_initialize);

[astupidname]

Hi again gosman,
First you have a syntax error in latlng1 multi-dimensional array:

var latlng1 = [
[new GLatLng(53.29094,-6.36829), '<div align="center"><a href="/blah.htm">Blah</a><br/><br/><img alt="" title="blah" src="blah.jpg"/></div>'],
[new GLatLng(53.352,-6.25455), '<div align="center"><a href="/blah1.htm">Blah 1</a><br/><br/><img alt="" title="blah 1" src="blah1.jpg"/></div>'],];

Should be:

var latlng1 = [
[new GLatLng(53.29094,-6.36829), '<div align="center"><a href="/blah.htm">Blah</a><br/><br/><img alt="" title="blah" src="blah.jpg"/></div>'],
[new GLatLng(53.352,-6.25455), '<div align="center"><a href="/blah1.htm">Blah 1</a><br/><br/><img alt="" title="blah 1" src="blah1.jpg"/></div>'] /***<--> note never a comma after last item in an array or object!***/
];

And the zoom seems to be setting just fine for me, but if you want to make sure or choose a different zoom level than what it automatically chooses in map1.setCenter via map1.getBoundsZoomLevel (getBoundsZoomLevel returns the zoom level at which all the markers contained on the map fit within the visible rectangle of the map), you could add a call to map1.setZoom(/*number from 0 to 17*/):
Change:

map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds));

To the following:

map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds));
map1.setZoom(12); //should not be necessary, but just add this line below the above, pass a number from 0 to 17 to map1.setZoom()

[gosman]

astupidname you're the man. Removing the last comma resolved the problem.

Regards

Graham