Adressdaten visualisieren mit Google Maps

Im folgenden Beitrag möchten wir demonstrieren, wie mit Google-Maps interaktive Landkarten aus Adressdatenbanken entstehen können. Dadurch ergeben sich interessante Möglichkeiten für wissenschaftliche Projekte oder aktuelle Trends wie GeoTagging.

gmap-geotag Google.Maps (maps.google.de) ist aus zwei Gründen bemerkenswert: erstens dürfen kommerzielle und nicht kommerzielle Seiten die Karten benutzen, zweitens bietet Google eine API zum individualisierten Erweitern der Karten mit eigenen Informationen.

Am Anfang steht die Karte

Um eigene Karten in einer Webseite einzusetzen, muss man sich einen Schlüssel (api key) bei code.Google.com holen. In der Webseite wird die Karte in drei Schritten eingebunden:

1. Die Scripte für Google-Api werden geladen. Anstelle von XXX muss der eigene Key eingetragen werden.

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

2. Wir erstellen einen Bereich mit einem <div>-Container in der gewünschten Größe der Map. (Hier 300x200)

<div id="map" style="width:300px; height:200px; border: thin solid black;">

3: Eine Javascript-Funktion, die nach dem Laden der Seite durch body aufgerufen, wird erstellt. Diese Funktion lädt die Karte in den <div>-Container und setzt den Ausschnitt an den gewünschen Ort und die Vergrößerung.

 

function load() {
  if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  }
}

Notfalls kopiert man sich einfach das Beispiel von Google, das zusammen mit dem Schlüssel angezeigt wird.

Zusätzlich können wir unsere Map mit weiteren Funktionen versehen. Ein map.addControl(new GMapTypeControl()) zaubert zum Beispiel einen Umschalter zwischen Satellitenfotos und Kartenmaterial auf die Map. Unter http://code.google.com/apis/maps/documentation/index.html findet man die Dokumentation mit vielen Beispielen.

Jetzt kommen die Adressen

Um Objekte weltweit auf der Karte verorten zu können, benutzt Google ein globales Koordinatensystem (Längengrad und Breitengrad). Die Position einer Adresse lässt sich direkt eingeben oder über die eingebaute Adresssuche ermitteln. Das machen wir uns im Beispiel zu Nutze. Ein einfacher http-request fordert die xml-Datei (adressen.xml) vom Server ab und sendet das Ergebnis an die Funktion setAllIcons.

http_request.onreadystatechange = setAllIcons;
http_request.open('GET', 'adressen.xml', true);

Die Funktion SetAllIcons verarbeitet die Adressen der Reihe nach und sendet bei jeder Adresse eine Anfrage an den Geocoder. Das Geocoder-Objekt erstellt wiederum an der gefundenen Stelle ein Symbol.

Ein Beispiel

gmap-example2
Bitte klicken Sie auf das Bild

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Google Maps - Geocoder</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.2">
<style type="text/css">
body,td,a,p,.h {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #484848;
}

body {
margin: 5px;
background-color: #ffffff;
background-image: url(/./grgrad.gif);
background-repeat: repeat-x;
}
</style>
<!-- einbinden der Scripte -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXX" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
var map ;
var icon;
var n;
var geocoder;
var marker=[];
var point=[];
var info=[];

// Wird nach dem Laden automatisch gesartet
function load()
{
if (GBrowserIsCompatible()) // Auf Browserkompatibitit&auml;t pr&uuml;fen
{
map = new GMap2(document.getElementById("map"));
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
var latlng = new GLatLng(52.52348,13.411494) ; // Berlin - Zentrum
map.setCenter(latlng,11); // 12 = Zoomfaktor f&uuml;r die &Uuml;bersicht bei 750x580

// Ein Symbol erstellen
icon = new GIcon();
icon.image = "icon.png";
icon.iconSize = new GSize(36, 32);
icon.iconAnchor = new GPoint(15,15);

// Hier kommt der AJAX-Aufruf der die Daten einliest - in nserem Fall nur ein Plain-XMLfile
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
http_request.onreadystatechange = setAllIcons;
http_request.open('GET', 'adressen.xml', true);
http_request.send(null);
} else
{
document.getElementById("map").innerHTML = "<h1>Der Browser ist nicht kompatibel mit Google Maps. Sorry...</h1>" ;
}
}class="black_box"

// Wertet die XML-Daten aus und postioniert die Icons - Wird &uuml;ber den http_request aufgerufen
function setAllIcons() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// geocoder Objekt von google
geocoder = new GClientGeocoder() ;
n = 1;
// root-Node
var items = http_request.responseXML.getElementsByTagName('adressen');
for (var i=1;i<items.length;i++) { // arbeite die Adressen ab
firma = getNode(items[i],'firma');
ort = getNode(items[i],'plz')+ " " + getNode(items[i],'ort')
adresse = getNode(items[i],'adresse1')
info[i] = firma+" | "+adresse;
// hole die globale Veortung
geocoder.getLatLng( "germany, "+ort+", "+adresse, function(point) {
if (point) {
// Setze neues Symbolclass="black_box"
marker[n] = new GMarker(point, {icon:icon, title:info[n]} );
map.addOverlay(marker[n]);
n++;
} });
}
}
}
}

// hole Wert aus einem Node
function getNode(obj,tag) {
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;

}

// -->
</script>
</head>
<body bgcolor="#D1D0CD" text="black" link="#444444" alink="gray" vlink="#111111" onload="load();" onunload="GUnload()">
<span style="font-size:18px;">&nbsp;Bezirks&auml;mter in Berlin</span>
<!-- ab hier wird die Map dargestellt -->
<div id="map" style="width: 757px; height:512px; border: thin solid black;"></div>
</body>
</html>

Unser Beispiel verwendet eine einfache XML-Datei für die Adressdaten und außer Javascript keine serverseitige Programmiersprache. Dadurch funktioniert die Seite teilweise auch ohne Webserver. Bei einer richtigen Datenbank würde man die Position vorher ermitteln und als Koordinaten abspeichern. Dann würde der AJAX-Aufruf zum Beispiel an ein PHP, JSP oder Phyton-Script gehen, das nur die gesuchten Daten samt Position zurückgibt.

Die Daten könnten jetzt mit InfoWindows, die sich beim Klick auf die Icons öffnen, noch aufgepeppt werden.

Das Beispiel mit Adressen und Bildern können Sie hier herunterladen. (gmap.zip)

Wir haben in der Vergangenheit bereits einige Kundenprojekte mit Google-Maps realisiert.