Hi,
I’d like to show 2 Google Maps on a page on my site.
In my <head> I have the following:
<script type="text/javascript">
//<![CDATA[
var map;
var map2;
function load() {
if (GBrowserIsCompatible()) {
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; //change this to be google default
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var icon1 = new GIcon();
icon1.image = "includes/1x1.gif"; //change this to be google default
icon1.shadow = "includes/1x1.gif";
icon1.iconSize = new GSize(0, 0);
icon1.shadowSize = new GSize(0, 0);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(55.31632, -4.571077), 12);
var point1 = new GLatLng(55.31632, -4.571077);
var marker1 = new GMarker(point1, {icon:icon});
map.addOverlay(marker1);
GEvent.addListener(marker1, 'click', function() {marker1.openInfoWindowHtml('Text goes here');});
map2 = new GMap2(document.getElementById("map2"));
map2.addControl(new GMapTypeControl(1));
map2.addControl(new GLargeMapControl());
map2.setCenter(new GLatLng(55.31632, -4.571077), 12);
var point2 = new GLatLng(55.31632, -4.571077);
var marker2 = new GMarker(point2, {icon:icon});
map2.addOverlay(marker2);
GEvent.addListener(marker2, 'click', function() {marker2.openInfoWindowHtml('Text goes here');});
//});
}
}
//]]>
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-3Gh73JhnfU9YBJfyeSvtBRJM2fnm0r5N7OWKBSvfHNBSoBDsRR8q0O-l-zsIT-cfVZi6JamCol4hg" type="text/javascript"></script>
I want this to allow me to show:
<div id=“map”>map 1</div>
and
<div id=“map2”>map 2</div>
Currently it only shows map 1. Any ideas what I’m doing wrong and why it won’t show map2 also?
Many thanks!