XML-Ecke

Ein spezieller API-Schlüssel ist für eigene Web-Projekte mit einer Google Map nicht länger erforderlich. Es ist aber sinnvoll, dennoch einen solchen Schlüssel einzubinden, um die Kontrolle über das Nutzungsvolumen zu behalten: Bei mehr als 25 000 Klicks pro Tag auf eine Karte, will Google Geld sehen. Einen API Key gibt es über die AP-Konsole von Google, hier kann man sehen, zu welchem Anteil die Quote für die kostenlose Nutzung beansprucht wird.

Hier nun als Beispiel, wie man vorgehen muss, um eine Karte mit mehreren Markern zu erstellen, die bei einem Mausklick jeweils ein Info-Fenster anzeigt – in Anlehnung an das Blog My Website Designers Zur Einbindung der API wird zunächst im Header des HTML-Dokuments angegeben, wo der Browser die API aufrufen soll. Die Sensor-Angabe definiert, ob das Gerät, mit dem die Karte aufgerufen wird, den eigenen Standort ermitteln und an die Anwendung übergeben kann. Der optionale API-Key wird unmittelbar vor dem Sensor eingefügt mit “key=(Zeichenfolge)&sensor…”.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  </script>

Anschließend folgen ein paar grundlegende JavaScript-Anweisungen zur Gestaltung der Karte:

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(49.240057, 14.557873);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Der obere Code enthält die Funktion zur Initialisierung, also zum Aufrufen der Karte. Dazu wird zunächst eine Variable namens latlng definiert, mit der das geografische Zentrum der Karte angegeben wird – in diesem Beispiel entspricht das einem relativ zentralen Ort in Europa. Die nächste Variable myOptions gibt einen Zoom-Faktor an (je größer der Zoomfaktor, desto kleiner der Kartenmaßstab), das mit der Variable latlng bereits eingeführte Kartenzentrum und die Art der Kartendarstellung – hier die Terrain-Darstellung für eine naturräumliche Ansicht, für die Straßenansicht muss man anstelle von TERRAIN ROADMAP angeben. Die Anweisung in der nächsten Zeile definiert man dann die Variable map, um die Karte mit myOptions im Code adressieren zu können.

Im nächsten Schritt werden die Positionen für die Marker festgelegt und die Inhalte für das Info-Fenster, das sich bei einem Klick auf den Marker öffnen soll. In der Zeichenkette der Variablen box_html muss den Anführungszeichen im HTML-Code ein Backslash als Steuerzeichen vorangestellt werden. Hier können dann beliebig viele Marker mit ihren jeweiligen Geodaten und Info-Fenstern hinzugefügt werden.

var box_html = "<img src=\"http://www.http://upload.wikimedia.org/wikipedia/commons/6/67/Coat_of_arms_of_Mainz-2008_new.svg\" width=48 height=56 /> <br /> Mainz <br /> <a href=\"http://de.wikipedia.org/wiki/Mainz\"> Mainz</a>"; 
var marker = add_marker(50.0000, 8.263705,"Mainz",box_html);
marker.setMap(map);
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png\" width=60 height=36 /> <br /> Berlin <br /> <a href=\"http://de.wikipedia.org/wiki/Berlin\"> Berlin</a>";
var marker = add_marker(52.5174, 13.4038,"Berlin",box_html);
marker.setMap(map);

Wie die Karte mit diesen beiden Variablen marker und boxhtml umgehen soll, wird mit den folgenden Anweisungen festgelegt: Es wird eine Funktion bestimmt, die Marker und Info-Fenster verbindet. Für das Info-Fenster stellt die API die Klasse InfoWindow bereit, mit der ein “Overlay”, eine zusätzliche sichtbare Ebene über die Kartenebene gelegt wird. Dem InfoWindow wird als Inhalt die Variable boxhtml zugewiesen, die im Beispiel bereits für Mainz und Berlin angelegt wurde:

function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});

Nun kann man noch ein eigenes Icon für den Marker festlegen, wenn man das Standard-Fähnchen der Google Maps nicht mag:

var icon = new google.maps.MarkerImage("design_images/my_icon.png");

Anschließend wird der Marker mit dem Aufruf einer eigenen Variablen erzeugt, der die bereits angelegten Eigenschaften zugewiesen werden:

var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: icon, title: title
});

Nach so viel Darstellung kommt jetzt endlich interaktives Verhalten dazu: Wenn auf einen Marker geklickt wird, soll sich das Info-Fenster öffnen:

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}

Jedes Info-Fenster hat standardmäßig eine Schaltfläche zum Schließen. Wenn zu viele Info-Fenster geöffnet werden, wird die Sache jedoch bald unübersichtlich. Deswegen wird noch eine Prozedur eingefügt, die alle Info-Fenster schließt, sobald die Karte mit der Maus verschoben wird:

google.maps.event.addListener(map, 'dragstart', function() {
infowindow.close();
});

Jetzt müssen nur noch alle angelegten Marker “zurückgegeben” werden:

return marker;

Im Body-Element des HTML-Dokuments wird die Karte mit “initialize” geladen, anschließend wird in einem div-Element die Größe der Karte festgelegt:

<body onload="initialize()">
 
<div id="map_canvas" style="width: 600px; height: 400px;"></div>
 
</body>

Den gesamten Code für die Karte gibt es hier (ohne Key):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>Google Map</title>
 
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.240057, 10.557873);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); 
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Coat_of_arms_of_Mainz-2008_new.svg/243px-Coat_of_arms_of_Mainz-2008_new.svg.png\" width=48 height=56 /> <br /> Mainz <br /> <a href=\"http://de.wikipedia.org/wiki/Mainz\"> Mainz</a>"; 
var marker = add_marker(50.0000, 8.263705,"Mainz",box_html);
marker.setMap(map);
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png\" width=60 height=36 /> <br /> Berlin <br /> <a href=\"http://de.wikipedia.org/wiki/Berlin\"> Berlin</a>";
var marker = add_marker(52.5174, 13.4038,"Berlin",box_html);
marker.setMap(map);
 
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var icon = new google.maps.MarkerImage("my_icon.png");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: icon, title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); google.maps.event.addListener(map, 'dragstart', function() {
infowindow.close();
});
return marker;
}
  </script>
</head>
 
 
<body onload="initialize()">
 
<div id="map_canvas" style="width: 600px; height: 400px;"></div>
 
</body>
</html>