JS: google maps und shadowbox auf der selben seite?
Verfasst: 04.10.2008, 03:20
hallo,
wie kann ich google maps und shadowbox auf der selben seite benutzen? (habe keine ahnung von js...) oben auf der seite ist der gmaps bereich, darunter - also ausserhalb der karte- eine handvoll thumbs die sich per klick in shadowbox oeffnen sollen.
wenn ich gmaps auskommentiere funktioniert shadowbox, wenn ich shadowbox auskommentiere funktioniert gmaps.
so wie ich das sehe versuchen die beide wohl beide sich bei "onload" zu initialisieren. kann man das irgendwie umgehen?
meine code im head sieht so aus:
jemand ne idee wie man das hinbekommt?
wie kann ich google maps und shadowbox auf der selben seite benutzen? (habe keine ahnung von js...) oben auf der seite ist der gmaps bereich, darunter - also ausserhalb der karte- eine handvoll thumbs die sich per klick in shadowbox oeffnen sollen.
wenn ich gmaps auskommentiere funktioniert shadowbox, wenn ich shadowbox auskommentiere funktioniert gmaps.
so wie ich das sehe versuchen die beide wohl beide sich bei "onload" zu initialisieren. kann man das irgendwie umgehen?
meine code im head sieht so aus:
Code: Alles auswählen
<!-- lightbox -->
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">
<script type="text/javascript" src="js/yui-utilities.js"></script>
<script type="text/javascript" src="js/shadowbox-yui.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
window.onload = Shadowbox.init;
</script>
<!-- end lightbox -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABCDE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconpoint= new GIcon();
iconpoint.image = 'gfx/point_red.png';
iconpoint.iconSize = new GSize(32, 32);
iconpoint.iconAnchor = new GPoint(16,16);
iconpoint.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["point"] = iconpoint;
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-13.709698, 60.309203), 14);
GDownloadUrl("xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var description = markers[i].getAttribute("description");
var url = markers[i].getAttribute("url");
var image = markers[i].getAttribute("image");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, description, url, image, id);
map.addOverlay(marker);
}
});
}
};
function createMarker(point, name, address, type, description, url, image, id) {
var marker = new GMarker(point, customIcons[type]);
if(image!="") {
image = "<img src=\"img/" + image + "\" style=\"float:left; padding:0 5px 0px 5px;\">";
}
else {
image = "";
}
var html = image + "<b><a href=\"" + url + "\">" + name + "</a></b><p style=\"max-width: 300px; min-height:100px;\">" + description + " <a href=\"page2.php?id=" + id + "\">read more...</a></p>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
