JS: google maps und shadowbox auf der selben seite?

Beitrag von **nerd** » 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:

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&#58;//maps.google.com/maps?file=api&v=2.x&key=ABCDE" type="text/javascript"></script>

<script type="text/javascript">
                 //<!&#91;CDATA&#91;
                 
                        var iconpoint= new GIcon&#40;&#41;; 
                        iconpoint.image = 'gfx/point_red.png';
                        iconpoint.iconSize = new GSize&#40;32, 32&#41;;
                        iconpoint.iconAnchor = new GPoint&#40;16,16&#41;;
                        iconpoint.infoWindowAnchor = new GPoint&#40;5, 1&#41;;

var customIcons = &#91;&#93;;
customIcons&#91;"point"&#93; = iconpoint;

function initialize&#40;&#41; &#123;
                if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
                        var map = new GMap2&#40;document.getElementById&#40;"map"&#41;&#41;;
                        map.addControl&#40;new GLargeMapControl&#40;&#41;&#41;;
                        map.addControl&#40;new GMapTypeControl&#40;&#41;&#41;;
                        map.setCenter&#40;new GLatLng&#40;-13.709698, 60.309203&#41;, 14&#41;;
                        
                        GDownloadUrl&#40;"xml.php", function&#40;data&#41; &#123;
                        var xml = GXml.parse&#40;data&#41;;
                        var markers = xml.documentElement.getElementsByTagName&#40;"marker"&#41;;
                        for &#40;var i = 0; i < markers.length; i++&#41; &#123;
                          var id = markers&#91;i&#93;.getAttribute&#40;"id"&#41;;
                          var name = markers&#91;i&#93;.getAttribute&#40;"name"&#41;;
                          var address = markers&#91;i&#93;.getAttribute&#40;"address"&#41;;
                          var type = markers&#91;i&#93;.getAttribute&#40;"type"&#41;;
						  var description = markers&#91;i&#93;.getAttribute&#40;"description"&#41;;
						  var url = markers&#91;i&#93;.getAttribute&#40;"url"&#41;;
						  var image = markers&#91;i&#93;.getAttribute&#40;"image"&#41;;
						  var point = new GLatLng&#40;parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lat"&#41;&#41;,
                                                  parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lng"&#41;&#41;&#41;;
                          var marker = createMarker&#40;point, name, address, type, description, url, image, id&#41;;
                          map.addOverlay&#40;marker&#41;;
                        &#125;
                      &#125;&#41;;        
                &#125;
                &#125;;
                
                function createMarker&#40;point, name, address, type, description, url, image, id&#41; &#123;
                        var marker = new GMarker&#40;point, customIcons&#91;type&#93;&#41;;
                        if&#40;image!=""&#41; &#123;
                        	image = "<img src=\"img/" + image + "\" style=\"float&#58;left; padding&#58;0 5px 0px 5px;\">";
                        &#125;
                        else &#123;
                        	image = "";
                        &#125;
                        
                        var html = image + "<b><a href=\"" + url + "\">" + name + "</a></b><p style=\"max-width&#58; 300px; min-height&#58;100px;\">" + description +  " <a href=\"page2.php?id=" + id + "\">read more...</a></p>";
                        GEvent.addListener&#40;marker, 'click', function&#40;&#41; &#123;
                                marker.openInfoWindowHtml&#40;html&#41;;
                        &#125;&#41;;
                        return marker;
                &#125;
		//&#93;&#93;>
                </script>
</head>
<body  onload="initialize&#40;&#41;" onunload="GUnload&#40;&#41;">

jemand ne idee wie man das hinbekommt?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **nerd** » 05.10.2008, 01:44

hallo??? keiner?

Beitrag von **DanielS** » 05.10.2008, 01:53

nerd hat geschrieben:...so wie ich das sehe versuchen die beide wohl beide sich bei "onload" zu initialisieren. kann man das irgendwie umgehen?...

Dass beide Skripte onload was machen wollen, sollte nicht weiter stören.

Ich würde so vorgehen, dass ich an verschiedenen Stellen in den Skripten einen Alert einbaue, damit sichtbar wird, an welcher Stelle die Skripte nicht mehr funktionieren.

In dem Google Maps Skript wirst Du nicht die Möglichkeit haben, was zu ändern (außer Du lädst es Dir für die Tests runter und arbeitest mit einer lokalen Kopie).

Hinter "yui-utilities.js", "shadowbox-yui" usw versteckt sich halt noch mehr Code, den man kennen müsste um Dir da weiterzuhelfen. Aber vielleicht kommst Du ja mit den Alerts selbst voran..