ogee.de

Google 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. Um eine Google Map 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).

Google Map mit Markern in eine Webseite einbinden

Beispielkarte (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 10.10.2008 - Navigationsbutton "Gelände" hinzugefügt):

Code im <head> 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 <body onunload=”GUnload()”> Tag:

<!-- Karte integrieren sowie Breite und Höhe festlegen -->
<div id="map" style="width: 600px; 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.addMapType(G_PHYSICAL_MAP);
map.setCenter(new GLatLng(29.980067, 31.135468), 14, G_HYBRID_MAP);
// 2 Icons mit Info-Fenster
var point = new GLatLng(29.97897, 31.134202);
var marker = createMarker(point,'<div style="width:240px">Pyramide 1 mit einem <a href="http://de.wikipedia.org/wiki/Pyramiden_von_Gizeh">Link</a> zu weiteren Infos')
map.addOverlay(marker);
var point = new GLatLng(29.975903, 31.130598);
var marker = createMarker(point,'Pyramide 2 ohne Link aber mit fetter<br /><b>Schrift</b>')
map.addOverlay(marker);
}
//]]>
</script>
</body>

Weitere Möglichkeiten eine Google Map mit Markern in eine Webseite einzubinden bietet der Google Map Search Wizard und die Funktion "Neue Karte erstellen" unter Google Maps "Meine Karten". Wer seine Kartendaten nicht im Quelltext eingeben möchte (wie im obigen Beispiel), dem helfen weitere Tutorials wie “Loading the data from an XML file” oder “Using PHP/MySQL with Google Maps - (Demo zum Artikel)“.

Google Maps mit RSS/KML

Diverse Webseiten bieten mittlerweile geokodierte RSS Feeds an (Feeds die Angaben zu Längen- und Breitengrad enthalten). Infos zu geokodierten RSS Feeds findet man bei Geocoded Rss, W3C Basic Geo und GeoRss. Solche Feeds kann man z.B nutzen um in einer Google Map Nachrichten einer externen Newsseite zu visualisieren oder um seine eigenen Weblogeinträge anzuzeigen. Der Vorteil geokodierter Rss Feeds ist, daß diese das automatisierte Aktualisieren von Inhalten in einer Karte ermöglichen (siehe auch KML/GeoRSS Overlays):

KML Dateien können via Google Map angezeigt und generiert werden:

Google Maps mit PHP/SQL

Wer seine Daten lieber in einer SQL-Datenbank pflegt, dem nutzen folgende Links:

Google Map mit Sidebar

In einer schicken Sidebar sind die Kartendaten übersichtlich dargestellt:


Offizielle Google Maps Seiten

Top Google Maps Mashups

Mapping Services

Weitere Hilfe & Anleitungen

Weblogs zum Thema Google Maps

 

zurück zur Startseite...

Weitere Inhalte auf ogee.de:

Über mich - Impressum & Hinweise - Kontakt
Die Inhalte auf ogee.de sind unter einer Creative Commons-Lizenz lizenziert
ogee.de - valid xhtml & css