[jQuery] using jquery to implement google maps on phpbb3

[Bob]

I have a small phpbb3 bulletin board and I'm trying to implement
google maps via a mod/bb code solution.

I have got it working where I can embed a single map. But
unfortunately, when a 2nd map is added to a thread, the first one
disappears. I've isolated this as having to do with the div tag id
used by the javascript. I've tried creating a random number for the id
code in js. But that doesn't work either, as the variable name is the
same for both instances of the map.

sigh...

I just today stumbled on jquery and was told there was a way to keep
each div id unique when multiple instances of the script are on the
page.

The javascript (along with the google maps api for my site) is below:

There are three phpbb bbcode variables in this code. "SIMPLETEXT1,
SIMPLETEXT2 AND NUMBER" They correspond to location, description and
the zoom for the map.

As noted, the map works in a single instance. But the next time
someone posts a map, the first one doesn't display. Does anyone know
how to use jquery to write the div id so that this actually works?

I will be forever in your debt for any help with this.

-bob

<script src="http://www.google.com/jsapi?
key=ABQIAAAAM79iA8VQkkozpKHIqSxUhRSXnAaMq2fjh449SYdBhdqqjpIXQBQfhT6m4WhePFr1o6g3nyIXBcFe_g"
type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
      google.load("maps", "2.x");
      function initialize() {
        var map = new GMap2(document.getElementById("map-" + ranNum),
{ size: new GSize(400,300) } );
        var address = '{SIMPLETEXT1}';
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(
              address,
              function(point) {
                if (!point) {
                  alert(address + " not found");
                } else {
                  map.setCenter(point, {NUMBER});
                  var marker = new GMarker(point);
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml('{SIMPLETEXT2}');
                }
              }
            );
        }
      var ranNum= Math.round(Math.random()*99999999999);
      document.write('<div id="map-' + ranNum + '" style="width:
650px; height: 550px"></div>');
      google.setOnLoadCallback(initialize);
      window.onunload = function() {
            if (map) {GUnload();}
       }
    //]]>
    </script>