Texte, Projekte und Fundsachen rund um Medien, Bildung und Computer
www.dirk-hoeschen.de
Adressdaten visualisieren mit Google Maps
Erstellt am: 01 Dez. 2007

­*Google.Maps (maps.google.de) ist aus zwei Gründen bemerkenswert. Erstens dürfen kommerzielle wie nicht kommerzielle Seiten die Karten benutzen. Zweitens bietet Google eine API zum individualisierten Erweitern der Karten mit eigenen Informationen. Im Folgenden möchte ich euch zeigen, wie so interaktive Landkarten aus Adressdatenbanken entstehen können. Interessant ist das z.B. für wissenschaftliche Projekte oder aktuelle Trends wie GeoTagging.

Am Anfgang 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="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 den Laden der Seite durch body aufgerufen wird erstellt. Diese Funktion lädt die Karte in den <div>-Container und setzt den Ausschnitt aud 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 ihr 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 mache ich mir 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);

SetAllIcons parsed die Adressen durch und sendet bei jeder Adresse eine Anfrage an den Geocoder. Das Geocoder-Objekt erstellt wiederum an der gefundenen Stelle ein Symbol.

Das Beispiel

*
Klicken, um das Beispiel aufzurufen

Hier der gesamte Code. Halbwegs versierte Programmierer sollten wenig Probleme damit haben.

<!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=ABQIAAAA_tOM59zZ_XsFVVdihujF6hQ-miN1MYoL4dHQNMeu9rS71G8BNxTBwS2oAgwwTEpxApbBCgBxl3rWvg"  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>" ;
    }
   }

   // 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 Symbol
                    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. Ich wollte das Beispiel aber so einfach wie möglich halten.

Das Beispiel mit Adressen und Bildern hier herunterladen. (gmap.zip)

Artikel Bookmarken bei...
Mister-Wong Webnews Yigg Alltagz Infopirat Delicious Furl Linkarena Yahoo Google

14 Kommentar(e)

Dirk schrieb am 19 Nov. 2009 um 12:37 Uhr
Du hast ein tolles Script geschrieben. Habe das jetzt für eine Webseite angepasst, aber irgendwie klappt es nicht so richtig: Die Fähnchen werden gesetzt, aber nicht alle und die Infos passen nicht zu den Fähnchen. Kann es sein dass die XML Datensätze zu viele sind? Oder hat sich bei mir ein Fehler in das Script eingeschlichen? Wäre dankbar, wenn Du Dir das mal ansehen könntest - http://humanistische-union.de/fileadmin/hu_upload/media/hu-geodata.html
Dirk schrieb am 31 Mai 2009 um 12:50 Uhr
Ich kann mir nur vorstellen, dass es Timeouts gibt, wenn zu viele Anfragen gleichzeitig kommen. Ich benutze selber Mootools für Ajax Requests und speichere die Koordinaten am Anfang in die in die Datenbank. So muss nicht jedes mal der Geocoder aufgerufen werden. Ich kann gerne mal ein Importscript veröffentlichen.
Helge schrieb am 29 Mai 2009 um 20:38 Uhr
Tolles Script. Ich habe jedoch das gleiche Problem wir Chris.
Wenn Du meine Seite: http://www.busse-reitsport.de/public/gmap.html
10x aufrufst, wirst Du erkennen, dass ab und an Icons fehlen und/oder falsch beschriftet sind. Bitte prüfe dieses einmal
Wolfgang schrieb am 18 März 2009 um 19:24 Uhr
@Christoph
AJAX steht für "A"synchron, und damit ich weiß, was bei der Gegenstelle passiert, gibts den readyState und den status. (4,200) zeigt an: "alles roger"
Christoph schrieb am 24 Dez. 2008 um 21:55 Uhr
Hi!
Bitte hilf mir kurz auf die Sprünge:
warum diese beiden Zeilen :

if (http_request.readyState == 4) {
if (http_request.status == 200) {

???

Vielen Dank
Dirk schrieb am 11 Dez. 2008 um 15:37 Uhr
Hallo Chris,
ich kann dein Problem nicht nachvollziehen. Bei mir sind die Icons immer an der gleichen Stelle. Vielleicht liegt es an deinem Browser/Plugins oder deiner Verbindung. Bei vielen Daten würde ich allerdings eh die Koordinaten (Längengrad.Breitengrad), die der Geoocoder zurück gibt, in der Datenbank speichern. Dann brauchen sie nicht jedes mal abgerufen werden. Ich hab mal ein Projekt für das Landesamt für Denkmalpflege in NDS gemacht. Dabei konnte man Hunterte von Icons in Sekunden abrufen und erhielt eine Topografie des Suchergebnisses.
Tipp: In dem Rückgabewert "point" bekommst du Längengrad und Breitengrad als Array... siehe http://code.google.com/intl/de-DE/apis/maps/documentation/services.html
Chris schrieb am 11 Dez. 2008 um 15:18 Uhr
Mir fällt gerade auf, dass du das gleicht Problem hast. Nicht alle Punkte sind immer vorhanden. Je öfter man aktualisiert, desto mehr verändern sich die Punkte. Die Karte wird als nicht immer richtig angezeigt.
Chris schrieb am 11 Dez. 2008 um 15:13 Uhr
Das script ist echt klasse. Ohne großen Aufwand konnte ich es bei mir einsetzen, habe aber ein kleines Problem:
Googel setze die OVIs nicht immer gleich und oft sind sie auch noch falsch beschriftet. Wenn man auf aktualisieren klickt, dann werden wieder andere OVIs falsch dargestellt und einige verschwinden. Kannst es dir mal unter: http://www.brondersnet.de/google/google.html anschauen. Wäre für jeden Tipp dankbar.
Lg, Chris
Matthias schrieb am 26 Nov. 2008 um 15:21 Uhr
Das Tut finde ich sehr gut. Wie kann ich noch ein Div einblenden lassen mit Daten werden geladen?
Mfg Maffy
Dirk schrieb am 24 Jun. 2008 um 00:44 Uhr
Schau dir den Code mal genau an. Bei meinem Beispiel liest er
die Adressen mit AJAX aus einer XML-Datei aus und macht dann eine
Anfrage an den Geocoder.

ort und adresse sind 2 Variablen. In point steht danach der Lägen- und Breitengrad.

Ich würde eine PHP-Datei erstellen, die die Daten aus der Datenbank holt und als XML-Datei ausgibt.

Statt auf adressen.xml machst du dann einfach einen Request auf die php Datei. Bei AJAX ist es egal woher die Daten kommen.

Schau dir mal den RelaXXPlayer an. Der macht massiv AJAX requests und benutzt MOOTOOLS. Damit ist das kinderleicht.
Raphael  schrieb am 23 Jun. 2008 um 09:55 Uhr Bild...
Hallo,
dickes Lob für dieses Tut. Bin was GMaps angeht noch Neu und habe 2 Fragen.
1. Gibt es ein Besipiel für den Request, wenn die Adressen nicht in einer xml sondern in einer DB liegen?
2. Wenn ich die Anschrift habe (PLZ, Ort, Strasse) wie kann anhand dieser Daten die Koordinaten ermitteln? (Der Kunde gibt seine Adresse in ein Formular ein - > beim Eintrag dieser Daten in die DB soll dann gleichzeitig die Koords ermittelt werden)

Bin für jeden Tipp dankbar...

Raphael
Dirk schrieb am 14 März 2008 um 17:48 Uhr
Ich hoffe der Kommentar bezieht sich nicht auf meine Seite oder das vorgestellte Script. Außerdem finde ich auch schlecht gemachte Webseiten nicht schlimm. Der Inhalt zählt.
KuffKutte schrieb am 14 März 2008 um 10:40 Uhr
Jemanden bezahlen, der sich damit auskennt anstatt das Web mit noch mehr halbfertigen Sachen vollzustopfen ;)
Harry schrieb am 03 Dez. 2007 um 18:19 Uhr Bild...
Was machen weniger versierte Programmierer?

Beitrag kommentieren

Ich freue mich jederzeit über Fragen, Anmerkungen und Kritik. Also gebt euch einen Ruck und kommentiert diesen Artikel.

Name
eMail optional für Antworten: wird nicht veröffentlicht!
Webseite optional
Kommentar
Kontrollcode
Spamvermeidung: bitte den Code im Bild eingeben
 

* zur Übersicht

Aktuelle Projekte

MBE Druckprofis Altgold-Kauf Lehranstalt für Gartenbau und Floristik Großbeeren Kunstleihhaus computer-daten-netze : feenders.de