Show 2 Google Maps on web page

Get Started
1

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&amp;v=2&amp;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!

2

Perhaps this link will help you.

Google Support - Embedding a map into a website or blog

Embedding a map into a website or blog - Maps Help

3

Code looks fine to me. Are you sure there is a div with id map2 somewhere in your HTML? And does have a width and height?

4