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.

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