Google Map in die eigene Seite integrieren

Wie wäre es, den Kundenstamm oder auch das eigene Netzwerk zu visualisieren? Dafür eignet sich z.B. die freigegebene Google Maps API, mit der sich recht einfach Standorte, z.B. von Kunden und Kundinnen sowie Zusatzdaten in Infofenstern darstellen lassen.

Einen Google Maps API Key sowie eine kurze Dokumentation gibt es hier, ohne den funktioniert es leider nicht. Die Geodaten in Form von Latitude (kurz lat) und Longitude (kurz lon) bekommt man z.B. entweder bei World of Maps für einzelne Städte (die Daten von dort sind ohne N und E zu übernehmen) oder bis auf die Strasse heruntergebrochen bei Multimaps.

Mit diesen Daten ausgerüstet lässt sich schon eine erste eigene Map erstellen und natürlich auch in das eigene HTML-Template einfügen.
Dazu wird zunächst folgender Code in den Head der Seite eingefügt:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=hier-den-API-Key-einfügen"></script>

Der folgende Code kommt in den Body der Seite und wird mit den ermittelten Geodaten und Zusatzinfos vervollständigt (siehe Anmerkungen):

<h1>Titel der Map</h1>

// width und height je nach verfügbarem Platz angeben
<div id="map" style="width:600px; height:600px;"></div>

<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// statt lon und lat hier die Zahlen eintragen, die den Mittelpunkt der Map bilden sollen
// die Auflösung als Ganzzahl angeben, für Deutschland darf sie nicht niedriger als 11 sein
map.centerAndZoom(new GPoint(lon, lat), Auflösung);

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

// im folgenden werden die Standorte eingetragen, es können beliebig viele sein

// statt lon und lat hier z.B. die Geodaten des ersten Kunden eintragen
var point = new GPoint(lon, lat);
var marker = createMarker(point,'Zusatztext, z.B. Infos zum Kunden, HTML-Code ist erlaubt')
map.addOverlay(marker);

// statt lon und lat hier z.B. die Geodaten eines weiteren Kunden eintragen
var point = new GPoint(lon, lat);
var marker = createMarker(point,'Zusatztext, Infos zum Kunden')
map.addOverlay(marker);

}
//]]>
</script>

Damit ist die erste einfache Map bereits fertig, kann hochgeladen und aufgerufen werden. Die Zusatztexte erscheinen beim Klick der sog. Marker.
Noch ein paar Tipps: Achten Sie darauf, die Geodaten in der richtigen Reihenfolge einzutragen, sonst landen Sie wie ich erstmal im Jemen. Die Geocoder geben die Daten meistens in der Reihenfolge lat - lon aus, Google möchte diese jedoch genau andersrum verarbeiten.
Packen Sie den Javascript-Code im Body nicht in eine Tabelle oder in ein div, der Internet Explorer kann dies sonst nicht darstellen.

Weitere Tipps und Gestaltungsmöglichkeiten sowie Funktionen finden Sie hier.
Wer sich mit dem Code jedoch gar nicht auseinandersetzen will, findet im Netz eine ganze Reihe nützlicher, oder auch eher spielerischer Tools auf Google Maps Basis, die meist nach einer kostenfreien Registrierung nutzbar sind:

• Wayfaring (Google Maps erstellen und mit anderen teilen)
• Google Maps EZ (eigene Google Maps ohne Javascript-Kenntnisse erstellen)
• Frappr! (Friends + Mapping = Frappr)
• Mapstats (Life-Report von Besuchern)
  
• Mapissimo (Life-Report von Besuchern und Life-Interaktion)
• YourGMap (Google Maps erstellen und mit anderen teilen)
• Mapbuilder (Google oder Yahoo Maps erstellen)

Geschrieben am 19.11.2005 um 22:46:30 Uhr in der Kategorie Fortgeschrittene, Tools, Feed: RSS 2.0. Sie können einen Kommentar schreiben.