Multiple Google Maps on same page - google-maps

Question

I have seen some topics about this on this forum but didn't get the answer I was looking for.
If I'm using such a code:
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
map.mapTypes.set('pink_parks', pinkMapType);
map.setMapTypeId('pink_parks');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map
});
}
})();
</script>
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions2 = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
map2.mapTypes.set('pink_parks', pinkMapType);
map2.setMapTypeId('pink_parks');
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map2
});
}
})();
</script>
So I have two divs with ID map_canvas1 and map_canvas2. But only the second one gets shown. I have this imported in the header of the document: http://maps.google.com/maps/api/js?sensor=false
I need to make both work but with seperated javascript. Did manage it with getting all into same function, but I need it to be seperated.
Any advice?
THANKS!

Answer 1

make two seperate javascript functions out of it, and put both in the onload function.
Like this:
window.onload = function(){
function1(variable);
function2(variable);
}
function1(variable) {
do stuff;
}
function2(variable)
do other stuff;
}
Alternatively you could use jQuery to handle the onload, i think that can actually add multiple handlers to the body onload. See also http://api.jquery.com/ready/
javascriptmap.php?map=xxx
$(function() {
$("#divID").each( function() {
showMap(divID);
});
});
showMap(divID) {
show map on #divID
};
On the html/php file:
<script scr="javascriptmap.php?map=map1" />
<script scr="javascriptmap.php?map=map2" />