// helper function to add a marker to the map function add_bubble(x, y, popupid) { marker = new GMarker(new GPoint(x, y)); marker.popupid = popupid; // register ID on object for later
// register an event handler to open the window on click GEvent.addListener(map, 'click', marker_clicked);
map.addOverlay(marker); }
// event handler; opens info window for marker function marker_clicked(marker) { // retrieve the element to show in the window element = document.getElementById(marker.popupid);
// we can't pass this element in because it gets destroyed // once the window is closed, so we make a copy element = element.cloneNode(true);
// switch display from off to on element.style.display = "";
// then open the window map.openInfoWindow(marker.getPoint(), element); }
// having created the helper functions we can add our marker add_bubble(18.198581, 49.803675, "center");
//]]> </script>
<!-- This element is not displayed on the page, but get passed into the information window -->
You have to have separate divs for each map. like <div id="map_1"></div> If you want them to be displayed at the same time. Otherwise it will only display one map inside the div. The way google maps works.
var map = new GMap(document.getElementById("map"));
that's the id for the div
Or at least the way I've used it. Is I have to create a div for each map I want to display. (if i want to have multiple maps on the same page) Then I create a function that i pass with the id, like through onclick.
one small point thought. even though the maps now have 2 ids the bubbles seem a bit confused. when I click on the marker on the top map the bubble appears on the map below it. I've gone through the script and tried a few amateur changes with no result or the bubbles disappear altogether.