Diskussion: Geocoding mit Google Map API (Koordinten zu Adressen)

Ayom-Team

Angesehenes Mitglied
Diskussion zum Artikel Geocoding mit Google Map API (Koordinten zu Adressen)
in der Kategorie
Gimmicks

Mit der Google MAP API kann man mittels geocoding zu Adressen Koordinaten suchen.

Hier eine Beispielimplementierung, deren Ziel es ist aus einer Liste von Adressen in XML, jeweils die dazugehörigen Koordinaten zu hohlt...
Achtung! Es handelt sich hierbei nicht direkt um lauffähigen Code, sondern eine Beispielimplementierung. Mit etwas Javascript Wissen sollte man in nützlicher Frist zu einem Ergebnis kommen. XML Wissen ist grundlegend auch notwendig. Wenn kein RCP bzw. XML-RCP Wissen vorhanden ist, kann der XML-String direkt in die HTML Datei geschrieben werden, und das Resultat direkt aus dem HTML herauskopiert und gespeichert werden.

(um den Quelltext zu kopieren, klicken sie auf edit)

Das file.xml
CODE <?xml version="1.0" encoding="ISO-8859-1"?>
<adresses>
<adress city="Signal Hill" state="CA"></adress>
<adress city="Simi Valley" state="CA"></adress>
</adresses>

Das file.html inkl. Javascript sieht so aus:
CODE
<html>

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key={IHR GOOGLE API KEY}"
type="text/javascript"></script>
</head>
<body onload='loadd()'>
<pre id='res'></pre>
<div id='err'></div>
</body>
<SCRIPT language='javascript'>
var i=0;
var Alenght = 0;
var adresses = null;


function loadd()
{
loaded = true;
load();
readXml2('file.xml');
}
/**
* load markers.xml via urls */
function readXml2(url)
{
var request = GXmlHttp.create();
request.open("GET", url, true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
var xmlDoc = request.responseXML;

adresses = xmlDoc.getElementsByTagName("adress");


for (var i = 0; i < adresses.length; i++)
{
var city = adresses.getAttribute("city");
var state = adresses.getAttribute("state");
getCoords(city, state);
}
}
}
request.send(null);
return true;
}


function getCoords(city, state)
{
geocoder.getLatLng(city+", "+state+", us", function(point)
{
if (!point)
{
document.getElementById('err').innerHTML += city+", "+state + " nicht gefunden. <br/>";
}
else
{
document.getElementById('res').innerHTML += "<adress city=""+city+"" state=""+state+"" x=""+point.x+"" y=""+point.y+""></adress>n";
}
});
}

</script>
</html>

Achtung Die Vorliegende Version hat sich nur mit Orten in den USA befasst, beachten Sie die Zeile: CODE geocoder.getLatLng(city+", "+state+", us", function(point)

Die Implementieren ist allerdings leicht anpassbar. Bei 5000 Orten hat Firefox nach >30min CPU time die Resultate ausgespuckt. Allerdings ist die Genauigkeit noch nicht perfekt und Adressen mit Strassengenauigkeit (z.B. Theresienweg, münchen, deutschland) sind nicht in allen Ländern möglich.

UPDATE: Bei dem endgültigen Implementierung war es notwendig die Adressen in 200er Päckchen zu zerlegen um die API nicht böse zu machen. Die Resultate hab ich ebenfalls an einen RCP geschickt der sie Serverseitig wieder gespeichert hat.


-------------------
Dieser Artikel steht unter der Creative Commons Lizenz.
 
Mich würde es interesieren, wie man das ganze in ein Anmelde Formular für eine Seite verwenden kann.
Um dann z.B. alle Mitglieder anzuzeigen, die im Umkreis des Heimatortes wohnen.

Mfg Maffy
 
Ich habe ein ähnliches Beispiel, was vielleicht dem einen oder anderen hier ebenfalls nützlich sein könnte. Es geht darum, auf einer Karte eine Adresse darzustellen und mit einem Marker sowie einem Infofenster (welches sogar HTML erlaubt) zu versehen.

Der JavaScript Teil im Head-Bereich:

QUOTE <head>
<script src="http://maps.google.de/maps?file=api&v=2.x&key=HIER-EUER-API-KEY" type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize() {
  if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map_germany"));

        geocoder = new GClientGeocoder();
 
  if (geocoder) {
        geocoder.getLatLng('{$Adresse}, {$Postleitzahl} {$Ort}',
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point);
              map.addOverlay(marker);
     map.setUIToDefault();
     marker.openInfoWindowHtml("<h4>Schrift etc</h4>");
     map.setMapType(G_NORMAL_MAP);
            }
          }
        );
      }
}
    }
</script>
</head>


Die von mir grün dargestellten Variablen Adresse, Postleitzahl und Ort sind durch eure eigenen Variablen zu ersetzen. Ich verwende hier ein Templatesystem und beziehe die Adressdaten aus (m)einer Datenbank.

Der Body-Teil enthält das darstellende DIV.


QUOTE
<body  onload="initialize()" onunload="GUnload()">
<div id="map_germany" style="width: 500px; height: 350px;"</div>
</body>





Hoffe jemand kanns gebrauchen.


MfG TTlong
 
Zurück
Oben