[jQuery] using jquery to implement google maps on phpbb3
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>