Google Maps bietet die Verwendung seines Kartenmaterials kostenlos an.
Um das Kartenmaterial nutzen zu können muß man sich bei Google registrieren. Dabei muß man auch die Webseite angeben, auf der Google Maps integriert werden soll. Anschließend erhält man einen so genannten Google API Key den man in seine Seite einbaut um so die rechtmäßige Verwendung von Google Maps zu verifizieren.
zum SeitenanfangDer dabei im Headerbereich der HTML Seite einzubauende Code sieht ca so aus:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=hier den Google API Key eintragen"></script>
bei "V=" wird der von Google erhaltene API Key eingetragen.
zum SeitenanfangDie Koordinaten für Google Maps sind Längen- und Breitengrade die in folgender Form einzugeben sind:
16.372547149658203, 48.20857355928577
Die Erste Zahl ist die Longitude, die zweite ist die Latitude, der hier angegebene Wert entspricht exact dem Eingang des Stephansdoms in Wien
zum SeitenanfangWenn einmal andere Koordinaten benötigt werden, können sie hier abgerufen werden:
mapki.com/getLonLat.php
Dabei ist zu beachten, das die Werte in der Reihenfolge LAT und dann LON ausgegeben werden, während Google Maps die Werte in der Reihenfolge LON/LAT benötigt. Spätestens wenn Ihr im Jemen landet wird euch der Fehler bewußt.
der Einbau kann auf mehrere Verschiedene Arten erfolgen, die einfachste ist es, im HTML Kontext einen DIV Container mit der ID "map" zu erzeugen:
<div id="map"></div>
es empfiehlt sich, einen weiteren umschließenden DIV Container zu erzeugen, um die Positionierung zu vereinfachen.
zum SeitenanfangWeiters benötigt die Google Maps Integration ein kleines Javascript, das im BODY ganz unten geschrieben werden kann.
<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
// den Zoom Wert als Ganzzahl angeben, für Deutschland darf sie nicht niedriger als 11 sein
map.centerAndZoom(new GPoint(16.372547149658203, 48.20857355928577), 5);
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 Markers eintragen
var point = new GPoint(16.372547149658203, 48.20857355928577);
var marker = createMarker(point,'<h6>Stephansdom </h6>1010 Wien
map.addOverlay(marker);
}
//]]>
</script>
Bei der Variablen "map" kann im "getElementById" Wert die ID eingetragen werden anhand der zu füllende Div Container erkannt wird.
Bei "map.centerAndZoom(new GPoint" werden die Longitude und Latitude Koordinaten für den gewünschten Kartenausschnitt angegeben, dahinter erfolgt der Zoomwert.
Bei "icon.image = " kann ein alternativer (gebrandeter) Marker erstellt und angegeben werden, darunter werden der Schatten und die Größen angegeben.
Bei "var point = new GPoint" wird eine Sprechblase erzeugt, in die man weitere, z.B.: Kontaktdaten eintragen kann. Diese Sprechblase öffnet sich bei Mouseover.
zum SeitenanfangGoogle maps ist leicht integrierbar und bietet viele Optionen. Die hier beschriebenen Optionen sind Grundfunktionen und bieten das Nötigste, das jedoch in vielen Fällen ausreichend sein wird.
zum SeitenanfangWer mehr Optionen benötigt findet im Netz einige Anleitungen dazu. Hier ein kleine Liste von Tutorials: