Google Maps API richtig einbinden

Nachdem ich die Google Maps API nun schon ein paar mal in Websites eingebaut habe, möchte ich hier meine Quellen und Codes sowohl für HTML, als auch für Flash festhalten.

HTML-Lösung

Zunächst muss man sich natürlich kostenfrei anmelden, damit man einen API-Schlüssel erhält.

Für die HTML-Variante muss man nun in den Head-Bereich der Seite ein Script von Google laden und den API-Schlüssel einfügen:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=HIER-DEN-API-SCHLUESSEL-EINFÜGEN"
type="text/javascript"></script>

Dann muss man in der Seite selbst dieses Div-Element einbauen:

<div id="map" style="width: 765px; height: 500px">
<noscript>
<span class="text-head">JavaScript ist nicht aktiviert.</span> <br />
Um die Karte angezeigt zu bekommen aktivieren Sie bitte JavaScript in Ihrem Browser.
</noscript>

<script type="text/javascript">
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(48.775031,9.149276), 13);     //<- Legt den Mittelpunkt der Karte fest, 13 ist die Zoomstufe der Karte
var point = new GLatLng( 48.775031,9.149276);            //<- Wohin der Marker soll
var marker = createMarker(point,'<span class="text-head">Zeile 1<br>Zeile 2<br></span><br>Strasse<br>PLZ Stadt <br><a href="mailto:#@mail.de">E-Mail</a><br>')
map.addOverlay(marker);
}
else {
alert("Sorry, Google Maps kann mit Ihrem Browser nicht angezeigt werden");
}
</script>
</div>

Hier kann in der ersten Zeile noch die Größe des Kartenausschnittes festgelegt werden. Mit “map.setCenter” wird der Mittelpunkt der Karte festgelegt und mit “var point” ein Marker erzeugt, dem man ebenfalls Koordinaten zuweisen muss. Ein gutes Tool um die Werte für Breiten- und Längengrad heraus zu finden gibt es hier. Die Angaben nach “var marker…” erscheinen in der Blase, wenn man einen Marker anklickt.

Eine Demo von diesem Beispiel gibt es unter labs.tocki.de/googlemapsdemo/Demo.html

Weitere Lösungen mit mehreren Markern, Bedienelementen usw. gibt es in der Dokumentation hier bei Code.Google.com

Flash-Lösung

Auch eine Flash-Lösung gibt es. AFComponents bieten eine sehr gut dokumentierte API an, die für den nicht kommerziellen Gebrauch kostenlos ist und (noch) ohne Google API-Schlüssel auskommt. Die Komponente ist in AS2 für Flash 8 geschrieben.

Nachdem die Komponente in Flash geladen ist, kann man eine Instanz davon einfach auf die Bühne ziehen und die Größe durch Skalierung anpassen. Dann muss man der Instanz noch einen Instanznamen geben – in meinem Beispiel “map”.

Nun kann ich die Komponente per AS ansteuern, z.B. mit

map.addControl(map.GZoomControl()); // <- Bedienelement: Zoom
map.addControl(map.GPositionControl()); // <- Bedienelement: Positionierung
map.addControl(map.GTypeControl()); // <- Bedienelement: Karte, Satellit, Hybrid
map.setCenter({lat:48.775031,lng:9.149276},15); //<- Legt den Mittelpunkt der Karte fest, 15 ist die Zoomstufe

var myLayer = map.addLayer({name:"my locations"});
myLayer.addPoint({lat:48.775031,lng:9.149276, radius:13, index:"to",fillRGB:0x1A78B6,strokeThickness:1});
// <- erzeugt einen blauen Marker an der definierten Stelle mit Radius 13px und der Beschriftung to

Auch hierfür braucht man wieder die Werte für Breiten- und Längengrad, die man am besten hier findet. Weitere Informationen und Funktionen findet man auf der Website von AFComponents, zum Beispiel in den Tutorials, oder im Forum.

demo-btn

Eine Demo des Flash Beispiels gibt es unter labs.tocki.de/googlemapsdemo/Map.html



// Kommentar schreiben
// Trackback URL
// Kommentare als RSS 2.0

4 Kommentare zu "Google Maps API richtig einbinden"

  • Vielen Dank für Eure tolle Information. Ich entwickle die Site http://www.rheinperle-worms.de und will dort Google Maps einbinden. Das funktioniert mit der URL, die Google anbietet, ist aber nicht zulässig. Dennoch habe ich dies vorübergehend so gemacht und auch den API key im head- Bereich eingebunden.
    Jetzt habe ich es mit Eurem Skript versucht und im Test mit Dreamweaver hat es auch funktioniert. Allerdings zentriert IE7 den Marker nicht wie er soll (Das Problem sehe ich nicht so gravierend). Als ich die beiden Skripte aber zum Test auf meinen Webspace geladen habe, erhalte ich die Meldung (Firefox und IE): Google Maps funktioniere nicht mit meinem Browser. Habt Ihr vielleicht eine Idee, woran das liegen kann.
    MfG
    O.Fehlinger

  • … nicht zulässig?

  • […] dazu und die Anpassung des Skripts aus meinem Beitrag Google Maps richtig einbinden kommt in Kürze. Mehr dazu bei Google […]

  • Josef sagt:

    Hallo! Finde die Anleitung gut formuliert, diese funktioniert leider nicht. Habe mir heute bei Google einen API-Key geholt und bei jedem Öffnen der Seite erscheint die Meldung: Für diese Website ist ein anderer Google Maps-API-Schlüssel erforderlich. Ein neuer Schlüssel kann unter http://code.google.com/apis/maps/signup.html generiert werden.

    Ich versteh das nicht – kennt jemand das Problem?
    Danke und viele Grüße,
    Josef

Schreibe einen Kommentar