Google Maps in die eigene Seite einbinden

Google Maps in die eigene Seite miteinzubinden, kann viele Vorteile haben. Viele Menschen heutzutage informieren sich vorab über Googles Funktion „Maps“ über den Zielort und die Umgebung. Mit wenigen Klicks und der Eingabe eines Zielortes ist in kurzer Zeit ein detaillierter Kartenausschnitt mit vielen interessanten Hinweisen vorhanden.

Genauen Ort angeben

Wenn man seinen eigenen Wohnort oder den Firmensitz geografisch präsentieren möchte, braucht man die genauen Koordinaten des Standortes. Dies erfolgt in weltweit genormten Längen- und Breitengraden. Mit der Internetseite Maps Coordinates kann man einfach durch Eingabe seiner Adresse die genauen Koordinaten herausfinden. Diese Informationen muss man dann später in seinen eigenen Quellcode einfügen.

Um das passende Kartenmaterial auf der eigenen Webseite präsentieren zu können, muss man einen vordefinierten Kartenausschnitt erzeugen und in die Seitenstruktur einbinden. Dafür benötigt man Java-Script-Quelltext sowie ein HTML-Element vom Typ div, der die Kartenansicht aufnimmt. Diese Methode ist sehr flexibel, da ein DIV-Element an fast jede Seitengröße anpassbar ist.

In die Webseite einbinden

Nun beginnt man mit der Integration auf der eigenen Webseite mit einem einleitenden Script-Tag, der auf den Namenspace der Google-Maps-API verweist und damit die Funktion für die Website zugänglich macht. Das Attribut sensor=false bedeutet in diesem Zusammenhang, dass eine sonst übliche Registrierung in Google wegfällt und der MAP-Dienst direkt genutzt werden kann. Das Java-Script dabei hat folgenenden Aufbau:

Als nächstes Element im Webseiten-Quelltext folgt nun der Div-Bereich, der den Kartenausschnitt anzeigen wird. Diesen Abschnitt muss man eine Bezeichner-ID geben. Dadurch kann das Script auf den Inhalt zugreifen und das Element eindeutig identifizieren. Dem Bereich muss man dann auch die Maße, in Form von Höhe und Breite, der Karte angeben. Nur dann kann Google auch den Kartenausschnitt korrekt anzeigen und richtig Zoomen sowie Skalieren. Der Quelltext sieht dabei so aus:

Nun legt man eine Variable für die Kartenoptionen an und initialisiert das Kartenobjekt. Hier benötigt man nun die vorher herausgefundenen Koordinaten. Diese muss man mitangeben, damit Google-API den korrekten Kartenausschnitt erzeugt und anzeigt. Der Parameter zoom:15 bezeichnet den Vorgrößerungsfaktor und dann gegebenenfalls im Quelltext angepasst werden. Mit ein paar Codeschnipseln ist auch dieser Schritt schnell erledigt:

var myOptions = {zoom:15,center:new google.maps.LatLng(48.0170769,10.9093332),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById(„map_canvas“), myOptions);

Das Kortenobjekt wird so korrekt erzeugt und im DIV-Element angezeigt. Es enthält auch die gleichen Bedienelemente wie die Karten auf Googles Seite.

Pin-Nadel mit Infofenster

Besonders schön sieht es aus, wenn in der Google Karte eine Pinnadel mit einem kleinen Informationsfenster erscheint.

Im ersten Schritt erzeugt man einen Marker, der als PIN-Nadel in der Karte angezeigt wird. Dieser erhält unter anderem auch die Koordinaten. Im zweiten Schritt initialisiert man das Infofenstern und bestimmt die anzuzeigenden Informationen. Der Informationsgehalt wird in HTML-Notation angegeben. Der dritte Schritt besteht aus der Initialisierung der beiden zuvor erzeugten Objekte. Dabei wird dem Kartenobjekt auch gleich ein klickbares Ereignis angefügt. Somit ist die Karte interaktiv und hat verschiedene Bedienelemente.

Marker = new google.maps.Marker(map:map, position: new google.maps.LatLng(48.0170769,10.9093332)});

infowindow = new google.maps.InfoWindow({content: „Computerhilfen.de
Unterzeile
Straße plus Hausnummer * PLZ Ort
www.computerhilfen.de * [email protected]});

google.,aps.event.addListener(marker, „click“, function(){infowindow,open(map,marker);});

infowindow.open(map,marker);}