Two google maps interfering with each other.

[ferdia]

Hi guys, I'm setting up tabbing on a page, two of the tabs contain Google Maps, and even though I've renamed as many variables and functions as I can find to make sure there are no conflicts, there still seems to be something getting in the way.

 

Here is the code of the two maps:

 

Map 1:

<div id="mapCanvas" style="width:495px; height:600px"></div>
                <script type="text/javascript">
// BeginOAWidget_Instance_2187524: #mapCanvas

  // initialize the google Maps 	

     function initializeGoogleMap() {
	// set latitude and longitude to center the map around
	var latlng1 = new google.maps.LatLng(52.338922, 
										-6.459819);

	// set up the default options
	var myOptions1 = {
	  zoom: 16,
	  center: latlng1,
	  navigationControl: true,
	  navigationControlOptions: 
	  	{style: google.maps.NavigationControlStyle.DEFAULT,
		 position: google.maps.ControlPosition.TOP_RIGHT },
	  mapTypeControl: true,
	  mapTypeControlOptions: 
	  	{style: google.maps.MapTypeControlStyle.DEFAULT,
		 position: google.maps.ControlPosition.TOP_RIGHT },

	  scaleControl: true,
	   scaleControlOptions: {
        		position: google.maps.ControlPosition.BOTTOM_RIGHT
    	  }, 
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  draggable: true,
	  disableDoubleClickZoom: false,
	  keyboardShortcuts: true
	};
	var map1 = new google.maps.Map(document.getElementById("mapCanvas"), myOptions1);
	if (false) {
		var trafficLayer = new google.maps.TrafficLayer();
		trafficLayer.setMap(map);
	}
	if (false) {
		var bikeLayer = new google.maps.BicyclingLayer();
		bikeLayer.setMap(map);
	}
	if (true) {
		addMarker(map1,52.338922,-6.459819,"ROBBIE ADDRESS HERE");
	}
  }

  window.onload = initializeGoogleMap();

 // Add a marker to the map at specified latitude and longitude with tooltip
 function addMarker(map1,lat,long,titleText) {
  	var markerLatlng1 = new google.maps.LatLng(lat,long);
 	var marker1 = new google.maps.Marker({
      		position: markerLatlng1, 
      		map: map1, 
      		title:"Strawberry Interactive Waterford",
		icon: "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png"});   
 }


// EndOAWidget_Instance_2187524
              </script> 

 

Map2:

<div id="mapCanvas_2" style="width:495px; height:600px"></div>
                <script type="text/javascript">
// BeginOAWidget_Instance_2187524: #mapCanvas_2

  // initialize the google Maps 	

     function initializeGoogleMap2() {
	// set latitude and longitude to center the map around
	var latlng2 = new google.maps.LatLng(52.256008, 
										-7.110437);

	// set up the default options
	var myOptions2 = {
	  zoom: 16,
	  center: latlng2,
	  navigationControl: true,
	  navigationControlOptions: 
	  	{style: google.maps.NavigationControlStyle.DEFAULT,
		 position: google.maps.ControlPosition.TOP_LEFT },
	  mapTypeControl: true,
	  mapTypeControlOptions: 
	  	{style: google.maps.MapTypeControlStyle.DEFAULT,
		 position: google.maps.ControlPosition.TOP_RIGHT },

	  scaleControl: true,
	   scaleControlOptions: {
        		position: google.maps.ControlPosition.BOTTOM_LEFT
    	  }, 
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  draggable: true,
	  disableDoubleClickZoom: false,
	  keyboardShortcuts: true
	};
	var map2 = new google.maps.Map(document.getElementById("mapCanvas_2"), myOptions2);
	if (false) {
		var trafficLayer = new google.maps.TrafficLayer();
		trafficLayer.setMap(map);
	}
	if (false) {
		var bikeLayer = new google.maps.BicyclingLayer();
		bikeLayer.setMap(map);
	}
	if (true) {
		addMarker2(map2,52.256008,-7.110437,"76 Johnstown, Waterford");
	}
  }

  window.onload = initializeGoogleMap2();

 // Add a marker to the map at specified latitude and longitude with tooltip
 function addMarker2(map2,lat,long,titleText) {
  	var markerLatlng2 = new google.maps.LatLng(lat,long);
 	var marker2 = new google.maps.Marker({
      		position: markerLatlng2, 
      		map: map2, 
      		title:"76 Johnstown, Waterford",
		icon: "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png"});   
 }


// EndOAWidget_Instance_2187524
              </script> 

 

Both are initiated via:

<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2187524" binding="#mapCanvas" />
  <oa:widget wid="2187524" binding="#mapCanvas_2" />
</oa:widgets>
-->
</script>

 

Any suggestions would be greatly appreciated, here is the current code in action:

http://strawberryinteractive.ie/contact-us.php

[ferdia]

I'm not sure if this will help, but I just found out that if I load the page directly on the tab of either map, then that map is ok, the other however, still has the problem.

 

Example: http://strawberryinteractive.ie/contact-us.php#third

[ferdia]

I am having to implement a work around for the time being.

 

The original problem can now be found here: http://strawberryinteractive.ie/contact-us2.php

[ferdia]

bump