| Adressdaten visualisieren mit Google Maps |
|
Im folgenden Beitrag möchten wir demonstrieren, wie mit Google-Maps interaktive Landkarten aus Adressdatenbanken entstehen können. Daurch ergeben sich interessante Möglichkeiten für wissenschaftliche Projekte oder aktuelle Trends wie GeoTagging.
Am Anfgang steht die KarteUm 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&v=2&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() { 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 AdressenUm 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; 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
<!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&v=2&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ät prü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ür die Ü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 ü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;"> Bezirksä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.
|
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.
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 Doppeclick 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 ;)
Wie wäre dann der gesammte Code?
danke für den Hinweis - funktioniert wieder
;-)
Joest