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. Als Beispiel sei hier der CenterFinder für die Umkreissuche auf www.mbe-druckprofis.de genannt.
 

Kommentar hinzufügen

E-Mail: Für Antworten. Wird nicht angezeigt.
  Sicherheitscode zur Prüfung. Nur Kleinschreibung. Keine Leerzeichen.
Kommentare (7)
XML Datei
05. Dezember 2011
Lucas
Leider werden keine Adressen in der Demodatei angezeit.
Grüße lucas
XML Adresssdatei
15. September 2011
Robert S
Leider ist es wiedermal so das die Adressen (XML) nicht geladen werden. Es wäre schön wenn das wieder gefixt werden würde. Viele Grüße Robert
Anzahl Einträge
14. Juli 2011
Christoph
Guten Tag,
ich habe soeben Ihren Beitrag gelesen, ihn als sehr wertvoll empfunden und der ganzen Sachen folglich auch einen Implementierungsversuch gewährt.
Klappt auch soweit wie beschrieben, jedoch hackt es an einer Stelle:
Es lassen sich nur ~10 Einträge darstellen? Liegt dies an einer Limitierung durch Google selbst?
Wissen Sie hier drüber vllt. etwas?
Lieben Gruß
Christoph
Re: Verorten
18. Dezember 2009
Dirk Hoeschen

Ist es nicht ein wenig viel verlangt, nach dem gesamten Code zu fragen? Bei der Dokumentation der API findest du Beispiele. Da wird sicher auch so etwas dabei sein. http://code.google.com/intl/de/apis/maps/documentation/articles.html Es gäbe 2 Möglichkeiten so etwas zu realisieren: 1: Der User gibt eine Adresse ein, die der Geocoder lokalisiert. 2: Der User sucht sich eine Stelle auf der Karte und macht einen Doppelclick. Der Doppelclick wird mit dem dblclick overlay event von Google Maps abgefangen und liefert die Geokoordinaten. http://code.google.com/intl/de/apis/maps/documentation/reference.html#GMap2.dblclick In jedem Fall müsste dann wie in unserem Beispiel ein Marker an die Koordinaten gesetzt werden und gegebenenfalls die Karte auf den Punkt zentriert werden. Damit der Ort abgespeichert wird braucht es dann noch eine Routine, die (möglichst per AJAX) die Koordinaten in eine Datenbank schreibt. Das alles ist nicht trivial.... aber das haben wir auch nicht behauptet ;)

Verorten
10. Dezember 2009
ich möchten gerne eine Karte in meinem CMS anzeigen lassen, die der User dann passend zum Artikel verorten kann, ist das möglich?

Wie wäre dann der gesammte Code?
Re: adressen.xml
21. Juni 2009
Hallo Thorsten,

danke für den Hinweis - funktioniert wieder
;-)

Joest
adressen.xml
20. Juni 2009
beim google maps beispiel wird die zip datei der adressen nicht geladen. bitte um info, wenn's funktioniert.
  

Der Fall Kurras und die Stasi - Microsite
Das erste Buch zum Fall des enttarnten Stasi-Spitzels Karl-Heinz... weiter

Online-Redaktionssystem für Verlage
Ende 2011 haben wir für den Gmeiner Verlag ein Redaktionssystem... weiter

Facebookintegration für Verlage
Anhand des Gmeiner Verlages zeigen wir, welche Möglichkeiten... weiter