Web-Baukasten der Friedrich-Alexander-Universität: Anleitung zur Erstellung von Google-Karten

1. Einleitung
2. Google Maps API Key
3. Die XML-Datei
4. Koordinaten eines Objektes finden
5. Farbe für den Marker wählen
6. Javascript modifizieren
7. Die Karte in die HTML-Datei einfügen
Weiterführende Links

1. Einleitung

Seit der Verfügbarkeit der Google Map APIs kann man die Google-Karten in eigene Seite integrieren und eigene Objekte kennzeichen. Dies erfolgt mit Hilfe von Javascript.

Im Folgendem wird aber gezeigt, wie sich eine Karte ohne Javascriptkenntnisse in einigen Schritten erstellen lässt. Dafür benötigen Sie einen Schlüssel für die Karte (Google Maps API Key) und eine Datei, die alle zu kennzeichnenden Objekte enthält (eine Datei mit der Endung .xml). Schließlich müssen Sie das vorgefertigte Javascript an einigen Stellen modifizieren und zusammen mit dem Google-Schlüssel in den HTML-Code hinzufügen.

nach oben

2. Google Maps API Key

Besorgen Sie sich zunächst einen Developer API Key. Auf der offiziellen Seite von Google Maps API lässt sich der Key schnell generieren. Achten Sie bitte darauf, dass ein Key nur für eine URL gilt.

Beispiel: Sie benötigen drei unterschiedliche Keys für diese Webadressen:
www.example.org
www.example.org/karten
www.example.org/anfahrt

Mit dem Erhalten des Keys sind Sie mit den Nutzungsbestimmungen von Google Map API einverstanden.

nach oben

3. Die XML-Datei

Dann schreiben Sie eine XML-Datei, die alle Objekte (Markers) mit ihren Koordinaten enthält, die auf der Karte dargestellt werden sollten. Diese Datei hat eine Baumstruktur und ähnelt einem HTML-Code, da sie auch Start- (<beispiel>) und Endtags (</beispiel>) hat.

Beispiel: Eine einfache XML-Datei für die Markers:

 <markers> 

	<marker lat="14.096754" lng="9.0976545" > Objekt 1 </marker>

	<marker lat="14.987754" lng="9.3785454" > Objekt 2 </marker>

 </markers>

So besteht die für die Google-Karte benötige Datei aus <markers>, die aus einzelnen <marker>s bestehen. Jeder Marker kann aber zusätzlich noch aus <label> (Name des Markers) und <infowindow> (Information, die beim Klicken auf den Marker angezeigt werden sollte) bestehen.

Beispiel: Eine XML-Datei für die Markers, die einen Namen und ein Infofenster haben (dies ist der Ausschnitt aus "suedgelaende-einfach.xml"):

 <markers>

	<marker lat="49.57372494214435" lng="11.02776288986206" >

	<label>Regionales RechenZentrum Erlangen</label>

	<infowindow> <![CDATA[Martensstraße, 1 <br/> 91058 Erlangen]]> </infowindow>

	</marker>

	<marker lat="49.573829301806924" lng="11.027172803878784" >

	<label> <![CDATA[Institut für Informatik]]> </label>

	<infowindow> <![CDATA[Martensstraße, 3 <br/> 91058 Erlangen]]> </infowindow>

	</marker>

	<marker lat="49.57438588290542" lng="11.029672622680664" >

	<label> <![CDATA[Hörsaal 10]]> </label>

	<infowindow> <![CDATA[Erwin-Rommel-Straße, 60]]> </infowindow>

	</marker>

	...

 </markers>

Siehe Beispiel-Karte 1, die auf "suedgelaende-einfach.xml" basiert.

Namen und Infofenster sind zusätzlich in CDATA ( <![CDATA[...Hier kommt der Inhalt...]]>) eingepackt. Innerhalb des CDATA-Abschnitts wird der Inhalt als ganz normaler HTML-Code behandelt. Das heißt, dass Umlaute und Sonderzeichen (< > " ‘) durch entsprechende ASCII-Zeichen erzetzt werden können (siehe ASCII-Tabelle).

In den Infofenstern dürfen gerne Links und Bilder mit Hilfe von HTML-Coden eingebaut werden.

nach oben

4. Koordinaten eines Objektes finden

An dem obigen Beispiel ist erkennbar, dass ein Marker auch Koordinaten "lat" (Latitude) und "lng" (Longitude) hat. Das Tool "Latidude und Longitude finden" hilft, die richtigen Koordinaten zu bestimmen. Dafür müssen Sie auf der Karte das gesuchte Ziel finden und auf das Objekt einen Marker setzen. Unter der Karte erscheinen die Koordinaten des gefundenen Objekts. Es ist wichtig, für die möglichst genaue Kennzeichnung die erhaltenen Daten in der genau dargestellten Länge in die XML-Datei einzutragen, sonst steht der Marker bei näherem Hinzoomen nicht exakt an der richtigen Stelle.

nach oben

5. Farbe für den Marker wählen

Ist Ihnen die Beispiel-Karte 1 mit den Standardmarkers nicht abwechslunsgreich genug oder möchten Sie verschiedene Objekte mit verschiedenen Farben kennzeichen? Dies können Sie umsetzen, indem Sie <marker> auch mit icontype charakterisieren.

Es stehen folgende Farben von Google Maps zur Verfügung:

- "red"
- "green"
- "yellow"
- "orange"
- "purple"
- "brown"
- "gray"
- "white"
- "black"

Beispiel: So sieht eine XML-Datei mit den Markers, die eine zusätzliche Eigenschaft icontype haben:

(Dies ist der Ausschnitt aus "suedgelaende.xml")

 <markers>

	<marker lat="49.57257001364636" lng="11.02776288986206" icontype="green">

	<label>Regionales RechenZentrum Erlangen</label>

	<infowindow> <![CDATA[Martensstraße, 1 <br/> 91058 Erlangen]]> </infowindow>

	</marker>

	<marker lat="49.573829301806924" lng="11.027172803878784" icontype="green">

	<label> <![CDATA[Institut für Informatik]]> </label>

	<infowindow> <![CDATA[Martensstraße, 3 <br/> 91058 Erlangen]]> </infowindow>

	</marker>

	<marker lat="49.57438588290542" lng="11.029672622680664" icontype="green">

	<label> <![CDATA[Hörsaal 10]]> </label>

	<infowindow> <![CDATA[Erwin-Rommel-Straße, 60]]> </infowindow>

	</marker>

	...

 </markers>

Siehe auch Beispiel-Karte 2 mit verschiedenen icontypes.

Auf der Beispiel-Karte 2 sind auch Haltestellen, Parkplätze und Infotheken zu sehen. Diese Objekte haben auch entsprechende icontypes. Anders formuliert, jedes icontype ist für eine bestimmte graphische Darstellung verantwortlich.

Beispiel: "bh" steht für Bushaltestelle, "info" für Infotheke, "parkplatz" für Parkplatz und so weiter.

Es stehen folgende Icons vom RRZE zur Verfügung:

- "bh"
- "parkplatz"
- "parkplatz_d"
- "info"
- "mensa"

Hinweis: Einige Markers (Parkplätze, Infotheken) haben normalerweise keine Infofenster. Vgl.: die XML-Dateien für Bushaltestellen und Infotheken auf der Beispiel-Karte 2.

Download von Ikons und Legende-Bilder für die Bespiel-Karten als komprimierte ZIP-Datei (21.9 kB)

Das Verzeichnis "images" mit den Ikons sollte da abgelegt werden, wo auch die Google-Karte(n) liegen.

nach oben

6. Javascript modifizieren

Dem Muster liegt der Javascript-Code aus der Beispiel-Karte 3 zugrunde. Den folgenden zu modifizierenden Text kopieren Sie am besten zuerst in eine Textdatei, die Sie dann bequem bearbeiten können:

//Ueberprüfen ob der Browser mit Google Map compatible ist
      
      if (GBrowserIsCompatible()) {
      var sidebar_html = "";
      var gmarkers = [];
	  var htmls = [];
      var i = 0;
      
      // Erzeugen der Variablen gicons und icontype fur verschiedene/farbige Markers
      var gicons = [];
      var icontype ="";
	  
      // Standartwerte fur farbige Ikons von Google Map
      var farbicon = new GIcon();
      farbicon.iconSize = new GSize(12, 22);
      farbicon.shadowSize = new GSize(22, 20);
      farbicon.iconAnchor = new GPoint(6, 20);
	  farbicon.infoWindowAnchor = new GPoint(5, 1);
      
      gicons["red"] = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png" );
      gicons["blue"] = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
      gicons["green"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
      gicons["orange"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["yellow"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_yellow.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["purple"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_purple.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["brown"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_brown.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["gray"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_gray.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["white"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_white.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
	  gicons["black"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_black.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");

//Eigene Werte fur eigene Ikons. Schatten-Ikons wurden aus der Google-Earth 6uuml;bernommen
	  
      gicons["bh"] = new GIcon (farbicon, "images/bushaltestelle.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon35s.png");       
      gicons["info"] = new GIcon (farbicon, "images/info.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon35s.png");
      gicons["parkplatz"] = new GIcon (farbicon, "images/parkplatz.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon15s.png");
      gicons["parkplatz_d"] = new GIcon (farbicon, "images/parkplatz-dach.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon15s.png");		
      gicons["mensa"] = new GIcon (farbicon, "images/essen.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon15s.png");			
      
      gicons["bh"].iconSize = new GSize(24, 24);
      gicons["bh"].shadowSize = new GSize(41, 26);
      gicons["bh"].iconAnchor = new GPoint(12,24);
      gicons["bh"].infoWindowAnchor = new GPoint(12, 0);
      
      gicons["info"].iconSize = new GSize(22, 22);
      gicons["info"].shadowSize = new GSize(39, 22);
      gicons["info"].iconAnchor = new GPoint(12,24);
      gicons["info"].infoWindowAnchor = new GPoint(12, 0);
      
      gicons["parkplatz"].iconSize = new GSize(20, 25);
      gicons["parkplatz"].shadowSize = new GSize(43, 25);
      gicons["parkplatz"].iconAnchor = new GPoint(10,25);
      gicons["parkplatz"].infoWindowAnchor = new GPoint(12, 0);
      
      gicons["parkplatz_d"].iconSize = new GSize(19, 30);
      gicons["parkplatz_d"].shadowSize = new GSize(47, 30);
      gicons["parkplatz_d"].iconAnchor = new GPoint(10,30);
      gicons["parkplatz_d"].infoWindowAnchor = new GPoint(12, 0);
      
      gicons["mensa"].iconSize=new GSize(21,21);
      gicons["mensa"].shadowSize=new GSize(41,22);
      gicons["mensa"].iconAnchor=new GPoint(11,21);
      gicons["mensa"].infoWindowAnchor=new GPoint(11,0);
      
      
      
	      
	  // Erzeugen des Markers und der Funktion, die ein Infofenster beim Klicken auf den Marker 6ouml;ffnet
	  
	  function createMarker(point,name,html,icontype) {
	  var marker = new GMarker(point, gicons[icontype]);
	  GEvent.addListener(marker,"click", function() {	
	  marker.openInfoWindowHtml('<div id="window"><div class="name"> ' + name + '</div>' + html + '</div>');
	  });
	  
	  gmarkers[i] = marker;
	  htmls[i] = '<div id="window"><div class="name"> ' + name + '</div>' + html + '</div>';
	  sidebar_html += '<li><a href="javascript:myclick(' + i + ')">' + name + '</a></li>';
	  i++;
	  return marker;
	  }
      
      // Erzeugen des Markers ohne Infofenster (z.B.:fur Parkplätze, Infotheken und so weiter)
	  
	  function createMarker2(point,icontype) {
	  var marker2 = new GMarker(point,gicons[icontype]);
	  gmarkers[i] = marker2;
	  return marker2;
	  }
	  
	  
	  // Funktion fur das Öffnen des Infofensters, wenn man ein Objekt aus der Liste wählt
	  function myclick(i) {
	  gmarkers[i].openInfoWindowHtml(htmls[i]);
	  }
	      
	  
	  // Erzeugen der Karte
	  var map = new GMap2(document.getElementById("map"));
	  map.addControl(new GLargeMapControl());
	  map.addControl(new GMapTypeControl());
	  
	  //!!!ACHTUNG!!! ÄNDERUNG AN DIESER STELLE
	  //ANFANG DES ÄNDERUNGSBEREICH "A"
	  
	  map.setCenter(new GLatLng(49.57372494214435, 11.02776288986206), 16);
	  
	  //ENDE DES ÄNDERUNGSBEREICH "A"
	  map.setMapType(G_HYBRID_MAP);
	  
	  
	  // Funktion fur das Anzeigen/Verstecken der Liste der auf der Karte bezeichneten Objekte
	  function anzeigen(div){
	  if(document.getElementById(div).style.display=='none'){ 
	  document.getElementById(div).style.display='block';
	  } 
	  else{ 
	  document.getElementById(div).style.display='none';
	  }
	  }
	  
	  // Funktion zum Auslesen der Daten aus einer xml-Datei
	  function readMap(url) {
	  var request = GXmlHttp.create();
	  request.open("GET", url, true);
	  request.onreadystatechange = function() {
	  if (request.readyState == 4) {
	  var xmlDoc = request.responseXML;
	  
	  // Umwandeln der Elementen in suedgelaende.xml in Variable markers
	  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	  
	  // Variable sidebar wieder neu setzen
	  sidebar_html="";
	  
	  for (var i = 0; i < markers.length; i++) {
	  
	  // Umwandeln  der Attributen von Marker-Element in suedgelaende.xml in entsprechende Variable
	  var lat = parseFloat(markers[i].getAttribute("lat"));
	  var lng = parseFloat(markers[i].getAttribute("lng"));
	  var point = new GLatLng(lat,lng);
	  var icontype = markers[i].getAttribute("icontype");
	  var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
	  var label = GXml.value(markers[i].getElementsByTagName("label")[0]);

// Erzeugen von Markers
      var marker = createMarker(point,label,html, icontype);
	  var marker2 = createMarker2(point, icontype);
	  map.addOverlay(marker);
	  
	  
	  //!!!ACHTUNG!!! ÄNDERUNG AN DIESER STELLE
	  //ANFANG DES ÄNDERUNGSBEREICH "B"
	  
      //Fur die Parkplatze, Infotheken, die  Markers ohne Fenster haben
	  switch(url) {
	  case "parkplaetze.xml":
	  map.addOverlay(marker2);
	  break;
	  }
	  }
	  // Hier wird der Inhalt von  sidebar_html in entsprechende id eingef6uuml;gt
	  switch (url) {
          case "hotel.xml":
          document.getElementById("hotel").innerHTML = sidebar_html;
          break;
          case "suedgelaende_kongress.xml":
	  document.getElementById("kongress").innerHTML = sidebar_html;
	  break;
	  }
	  
	  //ENDE DES ÄNDERUNGSBEREICH "B"
	  }
	  }
	  request.send(null);
	  }
         
	   
	  
	  readMap("parkplaetze.xml");
	  
	  //!!!ACHTUNG!!! ÄNDERUNG AN DIESER STELLE
	  //ANFANG DES ÄNDERUNGSBEREICH "C"
	  
	  //Lesen die Daten aus xml-Dateien
	  readMap ("verkehrszeichen.xml");
	  readMap("suedgelaende_kongress.xml");
	  readMap("hotel.xml");
	  
	  //ENDE  DES ÄNDERUNGSBEREICHS "C"
	  }
			
	  else {
	  alert("Sorry, Ihr Browser unterstutzt Google Map API nicht!");
	  }
	  
	  
	  //]]>
	</script>

Im Text (im Kommentar) finden sich drei Bereiche A, B und C, die zu ändern sind.

Im Bereich A setzen Sie die richtigen Koordinaten für das Zentrum der Karte. An der Stelle mit diesen Koordinaten soll die Karte zuerst geladen werden. In der Zeile map.setCenter(new GLatLng(49.57372494214435, 11.02776288986206), 16); steht die erste Zahl für Latitude, die zweite für Longitude und die letzte für den Grad des Zoomens. Die Zoom-Skala auf einer Google-Karte besteht aus 19 Teilstrichen. Je näher in die Karte gezoomt wird , desto höher wird der Grad des Zoomens.

Im Bereich B fügen Sie statt "parkplaetze.xml", "hotel.xml" und "suedgelaende_kongress.xml" Ihre eigene Dateien ein. Auch die ID-Namen "hotel" und "kongress" ersetzen Sie durch eigene (in den Zeilen document.getElementById("hotel").innerHTML = sidebar_html; und document.getElementById("kongress").innerHTML = sidebar_html;).

"hotel.xml" und "suedgelaende_kongress.xml" sind die Dateien mit den Objekten, deren Namen auf der HTML-Seite beim Ausklappen der Menü-Zeile als Liste erscheinen (siehe Beispiel-Karte 3).

Hinweis: An der Stelle von "parkplaetze.xml" soll die Datei mit solchen Objekten stehen, die keine Infofenster haben oder brauchen.

Im Bereich C werden alle XML-Dateien aufgeführt, die für eine Google-Karte gebraucht werden. Wie im Bereich B fügen Sie in die Anführungszeichen die richtigen Dateinamen ein.

Somit ist das Javascript fertig, um in den HTML-Code platziert zu werden.

nach oben

7. Die Karte in die HTML-Datei einfügen

Schritt 1. Fügen Sie das Javascript mit dem generierten Google Maps API Key in den Kopf-Bereich des HTML-Dokuments zwischen den Tags <head> und </head> ein. Das Script soll ungefähr so aussehen:

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhweFE5UtqwpF1xSvqigxsRRAPDRIDIN5HpO1QIFmwpxW6fEDXhS6gRQcL966RIvZZPXRYQoRI_if9A"
      type="text/javascript"></script>

Schritt 2. In den <body>-Tag wird eine Javascript-Funktion eingefügt:

 <body onunload="GUnload()">

Schritt 3. Hier entscheiden Sie, wo die Karte und wo die Liste der Objekte erscheinen sollen. ID ="map" steht dabei für die Karte. Andere ID-Namen werden willkürlich gewählt.
Der HTML-Code der Beispiel-Karte 3:

 <!-- die Karte und Menu zur Karte -->
  <div id ="googlemap">
 
 <!-- die Karte -->
   <div id="map"></div>
   
<!--Legende zur Karte -->
	   <div id="legende">
       <img src="images/info_legende.gif" width="30" height="22" alt="Info-Marker" /> - Infotheken mit weiteren Informationen<br/>
	   <img src="images/red.gif" width="20" height="20" alt="roter Marker" class="marker" /> - Für den Webkongress wichtige Gebäude <br/><img src="images/orange.gif" width="20" height="20" alt="oranger Marker" class="marker" /" - Hotels
	    </div>

	    
	    <div id="sidebar">
		<a href="javascript:anzeigen('kongress')" class="liste">Liste der für den Webkongress wichtigen Gebäude anzeigen</a>
		<ul id="kongress" style="display:none"></ul> <br/><br/>
		<a href="javascript:anzeigen('hotel')" class="liste">Liste der Hotels anzeigen</a>
		<ul id="hotel" style="display:none"></ul>
	    </div>

 </div>

Hinweis: Mit Hilfe von einer CSS-Datei können Sie bestimmen, wie groß die Karte sein soll. Auch für das Infofenster werden die Werte hier festgelegt. Das Infofenster hat den ID-Namen "window".

Beispiel: Die CSS-Datei für die Beispiel-Karte 3:

...
#map {
float:left;
width:600px; 
height:400px;
}
#window {
width: 200px;
font-size: 14px;
}
...

Schritt 4. Fügen Sie den bereits modifizierten Javascript-Code direkt vor dem </body>-Tag ein. Dies ist sehr wichtig, sonst meldet Internet Explorer einen Fehler!

nach oben

Weiterführende Links

Möchten Sie mehr über die Erstellung von Google-Karten erfahren? Folgende Links sind hilfreich:
Google Maps API Documentation (englisch)
Google Maps API Tutorial (englisch)
Die deutsche Google Maps Community (deutsch)
Google-Maps in die eigene Website einbinden (deutsch)
Google Map in die eigene Seite integrieren (expertinnen-web.de)(deutsch)

nach oben

Anleitung zur Erstellung von Google-Karten

Suche

Sprungmarken

Hauptnavigation

Bereichsmenu

1. Einleitung

2. Google Maps API Key

3. Die XML-Datei

4. Koordinaten eines Objektes finden

5. Farbe für den Marker wählen

6. Javascript modifizieren

7. Die Karte in die HTML-Datei einfügen

Weiterführende Links

Informationen zur Seite

Technisches Menu

Zusatzinfo

Letzte Meldungen zum Webbaukasten

Kleine Updates an CSS und Navigationsskript

Plugin zur Einbindung von Videos aus dem Videoportal

Neue Releaseversion des CMS NavEditor 2.12.0201 verfügbar

Anleitung zur Erstellung von Google-Karten

Sie befinden sich hier:

Sprungmarken

Letzte Meldungen zum Webbaukasten

Kleine Updates an CSS und Navigationsskript

Plugin zur Einbindung von Videos aus dem Videoportal

Neue Releaseversion des CMS NavEditor 2.12.0201 verfügbar