Programmierung Thomas Weise

twGmap - Grundlagen

Google Maps API benutzen

von Thomas Weise ( Blog)

Eine Karte von Google Maps generieren lassen und auf der eigenen Website einzubinden ist kinderleicht. Eine Google Maps nach eigenen Ansprüchen mit Hilfe der Google-Maps-API zu erstellen, ist jedoch weitaus eleganter und ermöglicht erst die Verwendung zusätzlicher Features.

Was Sie benötigen

  • Als Allererstes benötigen Sie einen Account bei Google (nur falls Sie noch keinen Account bei Google haben)
  • Nun benötigen Sie noch einen Google Maps API-Key (kopieren Sie sich den erhaltenen Key irgendwo hin, Sie benötigen ihn dann später). Dieser 86-stellige Key ist nur für die eine angegebene Website(Domain) gültig.
  • Um eine Google Map von einem bestimmten Gebiet (beispielsweise Ihres Wohnortes) zu erstellen, müssen Sie noch dessen geografischen Koordinaten bestimmen. Eine Möglichkeit, dies zu tun, finden Sie beispielsweise hier. (Suchen Sie auf der sich öffnenden Website Ihr gewünschtes Gebiet aus und klicken auf einen Punkt, der in Ihrer neuen Google Map der Mittelpunkt sein soll. Unterhalb werden dann dort die Werte für Latitude und Longitude angezeigt.) Speichern Sie sich auch diese zwei Werte irgendwo hin. Dieser Punkt wird dann der Mittelpunkt Ihrer neuenGoogle Map.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Einfache Google Map mit Zoom und Typauswahl

Haben Sie, wie oben beschrieben, Ihren API-Key und Ihre Koordinaten? Dann kann es losgehen.

Screenshot
Einfache Google Map mit Zoom und Typauswahl

Die HTML-Datei:

Google Maps werden auf Webseiten mit Javascript eingebunden. Fügen Sie deshalb in Ihrer html-Datei folgenden Code in den head-Bereich ein und tragen anstelle von 'IHR-API-KEY-VON-GOOGLE' Ihren 86-stelligen API-Key ein. Damit prüft Google bei jedem Aufruf dieser Seite, ob der API-Key gültig ist.

  <script src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de" type="text/javascript"></script>

Das Aussehen und die Funktion Ihrer Google Map kann nun auf verschiedene Weise angepasst werden. Wir empfehlen, dies in separaten Dateien zu tun. Eine CSS-Datei für die Darstellung/Aussehen und eine Javascript-Datei für die Funktion der Google Map. In unserem Beispiel haben wir diese Dateien 'twGmap.css' und 'twGmap.js' genannt. Zum Einbinden dieser Dateien fügen Sie bitte folgende 2 Zeilen in den head-Bereich

  <link rel="stylesheet" type="text/css" href="twGmap.css" />
  <script type="text/javascript" src="twGmap.js"></script>

und diese 1 Zeile in body ein:

  <body onload="twGmapLoad();" onunload="GUnload();">

Zu guter Letzt muss nun noch ein Bereich angelegt werden, in dem die Google Map angezeigt wird. Vorzugsweise benutzen wir dafür einen div-Bereich. Dieser bekommt eine id verpasst, damit wir ihn im Javascript ansprechen können (in unserem Beispiel ist die id 'twGmap').

  <div id="twGmap"> </div>

Die ganze html-Datei nochmal zusammengefasst:

<head> 
  <title>Google Maps - Demo 02 - Marker und Infofenster</title> 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
  <link rel="stylesheet" type="text/css" href="twGmap.css" /> 
  <script type="text/javascript"          src="twGmap.js"></script> 
  <script src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de" type="text/javascript"></script> 
</head> 
   
<body onload="twGmapLoad();" onunload="GUnload();"> 
  <h2>Google Map mit Marker und Infofenster (beim Klick auf den Marker)</h2> 
  <div id="twGmap"> </div> 
</body> 
</html> 

Die Javascript-Datei:

Die Javascript-Datei ist weitgehend kommentiert und sollte einigermaßen selbsterklärend sein. Gleich zu Beginn werden Variablen definiert für die id, die Position und die Zoomstufe.

Die darin befindliche Funktion twGmapLoad() wird beim Seitenstart automatisch aufgerufen. Sie führt ein paar Prüfabfragen durch und ruft schließlich die Funktion machTwGmap() auf, in welcher die Google Map dann erstellt wird. Dies mag im Moment etwas umständlich erscheinen, erleichtert uns jedoch spätere Anpassungen und das Einbinden zusätzlicher Features. Außerdem ist es anzuraten, bei der Vergabe der Namen für die Funktionen und für die 'id' nicht solche Bezeichnungen wie 'load()' oder 'map' oder 'gmap' zu benutzen, weil es dadurch schnell zu Verwechslungen kommen kann, sobald man mit mehreren Maps hantiert.

Öffnen Sie nun die Javascript-Datei und Sie sehen oben die (derzeit) 4 Variablen. Für den ersten Test sind diese schon mit Werten gefüllt. Für Ihre eigene Google Map können Sie hier die 'id' des (html-)Elements, die Geo-Koordinaten und die Zoomstufe anpassen.

var elementId = "twGmap"; 
var lat       = "51.041"; 
var lon       = "13.748"; 
var zoom      = 14;

Wichtig sind dann eigentlich nur folgende Zeilen:

var map = new GMap2(document.getElementById(id));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lat, lon), zoom, G_HYBRID_MAP);

Die erste Zeile erstellt die Google Map mit der angegebenen id. Zeile 2 erstellt das Zoom-Control (links oben auf der Google Map. Zeile 3 erstellt das Control zur Auswahl des Anzeigetyps (Karte, Satellit oder Hybrid). Zeile 4 setzt die Position (Mittelpunkt) der angegebenen Geo-Koordinaten. Für 'G_HYBRID_MAP' kann dort auch 'G_SATELLITE_MAP' oder 'G_NORMAL_MAP' eingesetzt werden.

Die CSS-Datei:

In der CSS-Datei wird die Darstellung, beziehungsweise das Aussehen der Google Map festgelegt. In diesem ersten bescheidenen Beispiel handelt es sich dabei vorerst nur um die Breite und Höhe der gesamten Google Map.

#twGmap { 
  width: 600px;  
  height: 450px; 
}

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Marker und Infofenster

Screenshot
Google Map mit Marker und Infofenster

Das Hinzufügen von Markern und Infofenstern geschieht nun ausschließlich in der Javascript-Datei. Das Aussehen des Infofensters wird in der CSS-Datei geregelt. Der Übersichtlichkeit halber lagern wir das Erstellen der Marker und der dazugehörigen Infofenster in der Javascript-Datei wieder in eine eigene Funktion aus (im Beispiel setTwMarkers(). Diese wird folgendermaßen aufgerufen:

  map = setTwMarkers(map);

und enthält unter anderem folgende Zeilen:

  var point  = new GPoint(13.748, 51.041);
  var marker = new GMarker(point);
  var html   = "HIER DEN HTML-CODE DES INFO-FENSTERS REIN";
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html)});
  map.addOverlay(marker);

In Zeile 1 wird der Geo-Punkt erzeugt mit Angabe der Breiten- und Längengrade (Achtung: zuerst den Längengrad angeben, dann den Breitengrad). Mit diesem Punkt erzeugen wir in Zeile 2 den Marker. In der Zeile 3 wird das Infofenster erzeugt. Diese Zeile ist dann bei einem anspruchsvollerem Infofenster natürlich etwas länger. Zeile 4 sorgt dafür, dass sich das Infofenster bei einem Klick auf den Marker öffnet. Hier werden unsere soeben erzeugten Marker und Infofenster verwendet. In Zeile 5 wird alles auf unsere Google Map 'projiziert'.

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

mit Übersichts-Ausschnitt

Screenshot
Google Map mit Marker und Infofenster

Sie können auch eine kleine Übersichtskarte anzeigen lassen, in der man den sichtbaren Bereich der Google Map mit einem kleinen Sichtfenster mit der Maus verschieben kann. Dafür bedarf es nur der Änderung einer Zeile im Javascript. Suchen Sie in der Javascript-Datei folgende Zeile

  map.addControl(new GMapTypeControl());

und ändern Sie diese Zeile folgendermaßen ab

  map.addControl(new GOverviewMapControl());

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

verschiedene Controls

Screenshot
verschiedene Zoom-Controls

Um eines der drei links zu sehenden Zoom-Controls auf Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

	map.addControl(new GSmallMapControl());
	

und ändern Sie diese Zeile folgendermaßen ab

	map.addControl(new GLargeMapControl());
	
oder
	map.addControl(new GSmallZoomControl());
	
Screenshot
das Entfernungs-Control

Zusätzlich ist es auch möglich eine Scale-Control für die Anzeige einer Entfernungs-Skala einzubinden. Diese wird dann unten links angezeigt und ist standardmäßig im Satelliten- bzw. im Hybrid-Modus recht unauffällig. Um diese Entfernungs-Control in Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

	map.addControl(new GSmallMapControl());
	
und fügen davor folgende zwei Zeilen ein (die erste Zeile bewirkt die Anzeige in Kilometer/Meter)
	_mPreferMetric = true;
	map.addControl(new GScaleControl());
	

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Bei Fragen, Anregungen oder dergleichen schreiben Sie doch einen Kommentar in mein Blog