Load multiple google map instances

This is currently the way I load my google map instance into the map div.

I would like to add another div with the id map2 that will hold another google maps instance, how can I do that?

<script type="text/javascript"> 
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(33.33333,44.44444);
    var myOptions = {
      zoom: 14,
      center: myLatlng,
  开发者_开发技巧    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);


    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map, 
        title:"If this is your exact location, press \"Add this location\""
    });
    google.maps.event.addListener(marker, 'click', function() {
      map.setZoom(8);
    });
  }


</script> 
<div id="map"></div>

If you want to do this via javascript

var map2 = document.createElement('div');
map2.id = "map2";

document.body.innerHTML += map2;

Then call your initialize function with a different div id;, ie map2;

EDIT: Are you sure you aren't calling the function incorrectly?

<script type="text/javascript"> 

  function initialize(mapNum) {
    var map;
    var myLatlng = new google.maps.LatLng(33.33333,44.44444);
    var myOptions = {
      zoom: 14,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"+mapNum), myOptions);


    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map, 
        title:"If this is your exact location, press \"Add this location\""
    });
    google.maps.event.addListener(marker, 'click', function() {
      map.setZoom(8);
    });
  }


initialize(1);
initialize(2);

</script> 
<div id="map1"></div>
<div id="map2"></div>