Saschs Blog
neuster   |   archiv   |   fotos   |   orte   |   suche   |   über
Kommentare deaktiviert

Google Maps auf eigenen Seiten nutzen

Veröffentlicht: 2. Oktober 2006

http://www.google.com/apis/maps/

Google Maps basiert auf JavaScript und kann daher, ohne eine Software zu installieren, in jedem JavaScript fähigen Web Browser angezeigt werden. Momentan unterstützt Google Maps folgende Browser: Firefox/Mozilla, IE 5.5+, Safari 1.2+ und Opera. Google Maps kann Punkte/Marker, Linien und Infofenster anzeigen. Google Maps in eine Website einbinden

Um eine Google Maps Karte in eine Website zu integrieren benötigt man zuerst einen API-Key. Diesen bekommt man nur, wenn man sich zuvor für ein Google Konto angemeldet hat. Jeder registrierte API-Key ist jeweils nur für ein Verzeichnis auf dem Webserver gültig (z.B. http://www.meineseite.de/googlemap).

Beispiel 1 (Gizeh): Diese Karte ist auf Gizeh ausgerichtet, zwei Marker (mit Info-Fenster) verweisen auf die Pyramiden. Im folgenden der Code zu Beispiel 1 mit Erläuterungen (Update am 13.04.2006 auf API Version 2):

Code im Tag mit API-Key:

<script src="http://maps.google.com/maps?
file=api&v=2&key=HIER DEN API-KEY EINGEBEN"
type="text/javascript"></script>

Code im Tag:

<!-- Karte integrieren sowie Breite und Höhe festlegen -->
<div id="map" style="width: 500px; height: 400px"></div>
 
<!-- Falls im Browser kein Javascript aktiviert ist wird diese Meldung
ausgegeben -->
<noscript>Du mußt in deinem Browser JavaScript aktivieren um Google
Maps zu verwenden</noscript>
<script type="text/javascript">
//< ![CDATA[
 
if (GBrowserIsCompatible()) {
 
        // Marker erstellen
        function createMarker(point,html) {
                var marker = new GMarker(point);
 
                // Zeige Info Fenster bei Klick
                GEvent.addListener(marker, 'click', function() {
                        marker.openInfoWindowHtml(html);
 
                });
                return marker;
        }
 
        // Karte auf Gizeh Pyramiden ausrichten, Zoom und Navigationsleiste
        anzeigen, Kartentyp festlegen
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(29.980067, 31.135468), 14, G_HYBRID_MAP);
 
        // Icon mit Info-Fenster
        var point = new GLatLng(29.97897, 31.134202);
        var marker = createMarker(point,'Pyramide 1')
        map.addOverlay(marker);
 
        var point = new GLatLng(29.975903, 31.130598);
        var marker = createMarker(point,'Pyramide 2')
        map.addOverlay(marker);
 
}
 
//]]>
</script>
 
</body></head>