Generating two Google Maps from one block of code - google-maps

Question

I've seen discussions on this topic on this site, and I've followed the proposed codes as closely as possible without luck. Can anyone tell me if the following code has any chance of being fixed, or if it's breaking a fundamental Google law? What it's trying to do is use one array of rectangles for two maps on the same page using the same geolocation code to position the marker representing the user's location. I have provided 2 sets of options as the zoom, center and functionality of the two maps are different (as is the size of the div in which each is displayed). The first map is zoomed to street level with the user's position in the center; the second is a wide view centered so as to show the full extent of the rectangle layer with the user's location wherever it happens to be on the map. This is a bit more complicated than the examples I've seen, so maybe it can't work and I just have to have two completely separate blocks of code. It would be a shame though to have to repeat the full rectangle array code...
Thanks for any suggestions.
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script><script type="text/javascript">
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var map,map2;
var mapOptions1 = {
zoom: 16,
center: coords,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
zoom: 5,
center: new google.maps.LatLng(0, 0),
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer1"), mapOptions1);
map2 = new google.maps.Map(document.getElementById("mapContainer2"), mapOptions2);
var marker = new google.maps.Marker({
position: coords,
map: map,map2
});
marker.setIcon('sites/default/files/YourLocation_0.png')
var rectangles = [];
rectangles[0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
rectangles[1]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aa, bb),new google.maps.LatLng(xx, yy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example2.com',
clickable: true
});
rectangles[2]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aaa, bbb),new google.maps.LatLng(xxx, yyy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example3.com',
clickable: true
});
[.....lots more rectangles....]
for ( i = 0; i < rectangles.length; i++ ){google.maps.event.addListener(rectangles[i], 'click', function() {window.location.href = this.url;
});
}
layer.setMap(map);
layer.setMap(map2);
});
}else {
alert("Geolocation API is not supported in your browser.");
}

Answer 1

This will not work:
rectangles[0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
You need to create a separate rectangle for each map (the rectangle can only be on one map at a time) something like this (which creates a two dimensional array, [1] for map, [2] for map2):
rectangles[1][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
rectangles[2][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});