Google Maps

Geocoding

Fragt sich nur, wie Sie zu einer Adresse die entsprechenden Koordinaten erhalten. Dafür gibt es verschiedene Möglichkeiten: Sie können beispielsweise den entsprechenden Service von Google Maps nutzen.Nehmen wir an, Sie suchen die Koordinaten des Marienplatzes in München, so erstellen Sie eine URL, die folgendermaßen aussieht:maps.google.com/maps/geo?q=Marienplatz,+Muenchen,+Bayern,+Deutschland&output=json&sensor=false&key=IHRKEY.

  • Hinter q= schreiben Sie die gewünschte Adresse.
  • output=json ist der Standard-Output
  • sensor=false - an dieser Stelle müssen Sie wieder angeben, ob Sie einen Sensor nutzen oder nicht
  • key=IHRKEY - hier wird schließlich Ihr Key erwartet.
google, google maps, api, internet, webdesign, webpage

© Internet Magazin

Karte mit den Standardbedienelementen...

Haben Sie diese URL im Adressfeld des Browserfensters eingegeben und aufgerufen, erhalten Sie im JSON-Format alle Informationen, auf die Sie bei der Nutzung des Services zugreifen können. Wir benötigen Breitengrad und Längengrad, die Sie unten in der Antwortseite unter Point finden.Breiten- und Längengrad lassen sich auch noch auf einem anderen Wege recht praktisch ermitteln: Sie gehen zum normalen Google-Maps-Dienst (http://maps.google.de/ ) und geben die gewünschte Adresse an.

google, google maps, api, internet, webdesign, webpage

© Internet Magazin

... und Karte mit Markierung und Infofenster.

Durch eine Zusatzfunktion können Sie sich dann zu allen Punkten auf der Karte, über die Sie mit der Maus fahren, den jeweiligen Breiten- und Längengrad anzeigen lassen. Klicken Sie rechts oben auf den Punkt Neu, der neben einem Reagenzglas erscheint - dem Symbol für die Google Labs.Ein neues Bedienfenster öffnet sich, in dem Sie genauere Optionen für die Anzeige der Karte festlegen können. Wählen Sie LatLng-Kurzinfo aktivieren. Wenn Sie Änderung speichern gedrückt haben, wird jetzt immer der aktuelle Breiten- und Längengrad zur Mausposition angezeigt. Dies ist besonders hilfreich, wenn Sie genauere Koordinaten in der Umgebung einer Adresse brauchen. Alternativ können Sie zur Ermittlung der Koordinaten einen Online-Dienst nutzen wie etwa Travelgis (http://www.travelgis.com/geocode/ ).

Bedienelemente unter Kontrolle

In der ersten Beispielkarte wurden die Standardbedienelemente durch die folgende Zeile hinzugefügt:

map.setUIToDefault();

Sie können aber auch genau bestimmen, welche Elemente angezeigt werden sollen. Die wichtigsten Bedienelemente sind folgende:

  • GLargeMapControl - großes Bedienelement zum Schwenken und Zoomen
  • GSmallMapControl - kleineres Bedienelement zum Schwenken und Zoomen
  • GSmallZoomControl - ein kleines Zoom-Bedienelement
  • GScaleControl - Kartenmaßstab
  • GMapTypeControl - Schaltflächen Umschalten zwischen den Kartentypen
  • GOverviewMapControl - kleine Übersichtskarte in der Ecke des Bildschirms
Der Befehl addControl() fügt die einzelnen Elemente Ihrer Karte hinzu. Dabei können Sie natürlich immer nur eines der möglichen Zoom-Elemente wählen.

Außerdem können Sie steuern, welcher Kartentyp angezeigt werden soll.

Die wichtigsten sind:

G_NORMAL_MAP - normale StraßenkarteG_SATELLITE_MAP - SatellitenbilderG_HYBRID_MAP transparente Ebene von Hauptstraßen auf SatellitenbildernG_PHYSICAL_MAP physische Eigenschaften wie Gelände und Vegetation.

Den Typ definieren Sie über setMapType().

Das folgende Beispiel erstellt eine Karte, bei der nur das Bedienfeld zum Zoomen und Verschieben in der linken oberen Ecke und die kleine Übersichtskarte in der rechten Ecke angezeigt werden. Außerdem wird als Kartentyp Satellitenbilder festgelegt.

var map = new GMap2(document. getElementById("karte")); map.addControl(new GSmallMapControl()); map.addControl(new GOverviewMapControl()); map.setMapType(G_SATELLITE_MAP); map.setCenter(new GLatLng(48.1371155, 11.5748594), 16);

Markierungen hinzufügen

Jetzt fehlt noch eine Markierung der Adresse oder des geografischen Punktes. Markierungen erstellen Sie über das GMarker-Objekt, dem Sie beim Aufruf den Punkt übergeben. Über addOverlay() wird die Markierung der Karte hinzugefügt. Soll die Markierung mit einer Sprechblase mit Text erscheinen, so rufen Sie die Methode openInfoWindowHtml() auf, der Sie den entsprechenden Text übergeben.

//Punkt definieren var point = new GLatLng(48.1371155, 11.5748594); //Markierung hinzufügen map.addOverlay(new GMarker(point)); //Sprechblase mit Infotext ergänzen map.openInfoWindowHtml(point, "Marienplatz in München");

Diese Sprechblase kann beliebigen HTML-Code enthalten und so lassen sich auch Bilder integrieren:

map.openInfoWindowHtml(point, "Marienplatz<br /><img src='bild.jpg' height='70' width='100' />");

google, google maps, api, internet, webdesign, webpage

© Internet Magazin

Google Maps API zum Bewegen auf antiken Gemälden bei der Kremer Collection.

Hierbei müssen Sie nur aufpassen, dass Sie die Anführungszeichen korrekt verwenden: Da der gesamte HTML-String von doppelten Anführungszeichen umgeben wird, können in diesem nicht weitere doppelte Anführungszeichen stehen. Sie müssen diese durch einfache ersetzen wie im Beispiel oder die doppelten Anführungszeichen durch einen Backslash maskieren.Derzeit wird das Infofenster direkt beim Aufruf der Seite angezeigt. Das Fenster kann aber auch erst bei Klick auf die Markierung geöffnet werden. Die API stellt nützliche Methoden zur Verfügung, um Ereignisse abzufangen, ohne dass Sie sich um die Browserunterschiede beim Eventhandling kümmern müssen.Sie geben zuerst das Element an, das auf das Ereignis reagieren soll, dann den Typ des Ereignisses und am Schluss in Form einer anonymen Funktion das, was geschehen soll:

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml ("Marienplatz in M&uuml;nchen"); });

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".