Google Map API – Geocoding – Adresse anstelle von Latitude und Longitude
Durch die Geocoding API von Google kann man eine Adresse in geografische Koordinaten umwandeln und somit einen Marker auf der Google Karte einfügen.
Beispiel: Die Geocoding API wandelt die Adresse „Alexanderplatz, Berlin, Deutschland“ in die geografischen Koordinaten 52.5219184 & 13.4132147 um. Mit diesen Daten könnt Ihr nun ganz einfach eure Google Maps befeuern.
Google Geocoding API – Lat und Lng mit Adresse finden
Ihr könnt es euch einfach machen und die gesuchte Adresse oben in das Suchfeld eingeben. Anschließend erhaltet Ihr den Geocoding API Link welcher die Informationen in JSON zum Ort beinhaltet.
Hinweis: Ihr müsst zuvor einen Google Maps API Key erstellen und diesen mit „
YOUR_API_KEY
“ austauschen, ansonsten funktioniert der Link nicht und wirft nur eine Fehlermeldung: „The provided API key is invalid.„
Wenn Ihr euren Key eingefügt habt, solltet Ihr die entsprechenden Daten in JSON Format erhalten. Alternativ könnt Ihr Euch die Daten auch in XML Format ausgeben lassen. Tauscht dazu im link das Wort „json“ mit „xml“ – Der Rest bleibt identisch.
Die Ausgabe sollte dann so aussehen:
{
"results" : [
{
"address_components" : [
{
"long_name" : "Berlin",
"short_name" : "Berlin",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Mitte",
"short_name" : "Mitte",
"types" : [ "political", "sublocality", "sublocality_level_1" ]
},
{
"long_name" : "Berlin",
"short_name" : "Berlin",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Deutschland",
"short_name" : "DE",
"types" : [ "country", "political" ]
},
{
"long_name" : "10178",
"short_name" : "10178",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "10178 Berlin, Deutschland",
"geometry" : {
"location" : {
"lat" : 52.5219184,
"lng" : 13.4132147
},
"location_type" : "GEOMETRIC_CENTER",
"viewport" : {
"northeast" : {
"lat" : 52.52326738029149,
"lng" : 13.4145636802915
},
"southwest" : {
"lat" : 52.52056941970849,
"lng" : 13.4118657197085
}
}
},
"place_id" : "ChIJbygR2x5OqEcRbhbkZsMB_DA",
"types" : [ "establishment", "point_of_interest" ]
}
],
"status" : "OK"
}
Google Maps Geocoding Beispiel mit PHP, Javascript und Ajax
Im folgenden möchte ich euch an einem Beispiel zeigen, wie ihr mit PHP, Javascript und Ajax die Geocoding API von Google Maps sinnvoll nutzen könnt. Im Grunde ist es eigentlich der vereinfachte Code aus der Google Maps Geocoding Karte oben aus diesem Beitrag.
HTML
Als erstes benötigen wir ein Eingabefeld, einen Button und einen Bereich für die Karte. Ich habe bewusst nicht mit einer Form gearbeitet, da ich keinen reload wollte. Finde die Variante mit Ajax eleganter, auch wenn ein Input Feld ohne Form drumherum nicht WC3 konform ist.
Geocoding
Javascript
Als nächstes bauen wir uns das Javascript zusammen. Um es den Besucher einfacher zu machen und eventuelle Tippfehler zu vermeiden binde ich noch den Autocompleter ein, der einen bei der Eingabe Adressen vorschlägt.
Beim Klick auf den „Button“ oder bei drücken von Enter rufe ich die Funktion LatLngSearch()
auf, die den value aus dem Input-Field ausliest. Ist der value gefüllt starte ich meine ajax.php.
function initAutocomplete() {
var markers = [];
autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')),{
types: ['geocode']
});
var myLatLng = {
lat : 52.520008,
lng : 13.404954
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 2,
center : myLatLng
});
// START BY CLICK
jQuery('div#find').on('click', function() {
LatLngSearch();
});
// START BY PRESS ENTER
jQuery('#address').bind("enterKey",function(e){
LatLngSearch();
});
jQuery('#address').keyup(function(e){
if(e.keyCode == 13) {
LatLngSearch();
}
});
// SHOW LAT LNG
function LatLngSearch( ) {
var value = jQuery('input#address').val();
if ( value ) {
var request = $.ajax({
url : "/ajax.php",
method : "POST",
data : {
address : value
},
dataType : 'json',
success : function(result) {
console.log(result);
var searchLatLng = {
lat : result['lat'],
lng : result['lng']
};
// NEW POSITION
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 14,
center : searchLatLng
});
var marker = new google.maps.Marker({
map : map,
position : searchLatLng,
animation : google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: 'Lat: ' + result['lat'] + '
Lng: ' + result['lng']
});
infowindow.open(map,marker);
// ADD MARKER TO ARRAY
markers.push(marker);
},
error : function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
}
}
Zusätzlich müsst Ihr noch die .js einbinden:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete
AJAX
In der ajax.php Datei prüfe ich zunächst, ob eine Adresse übermittelt wurde. Anschließend verarbeite ich die Adresse solange, bis sich keine Sonderzeichen mehr darin verstecken, wandle Umlaute um ersetze doppelte Bindestriche und Leerzeichen mit einfachen Bindestrichen. Anschließend übermittel ich der Funktion file_get_contents()
die Adresse und decode die JSON-Daten, sodass ich damit arbeiten kann.
Anschließend Speicher ich die Latitude und Longitude in einem Array ab und kodiere dies wieder ins JSON-Format. Ihr könnt natürlich noch viel mehr Werte aus der Geocoding API ins Array abspeichern.
if ( $_POST['address'] ) {
$address = $_POST['address'];
$address = str_replace(array('ä','ü','ö','ß'), array('ae', 'ue', 'oe', 'ss'), $address );
$address = preg_replace("/[^a-zA-Z0-9\_\s]/", "", $address);
$address = strtolower($address);
$address = str_replace( array(' ', '--'), array('-', '-'), $address );
$address = 'https://maps.googleapis.com/maps/api/geocode/json?address=' . $address . '&key=YOUR_API_KEY';
$json = file_get_contents($address);
$obj = json_decode($json);
$datas['lat'] = $obj->results[0]->geometry->location->lat;
$datas['lng'] = $obj->results[0]->geometry->location->lng;
echo json_encode( $datas );
}
Daten in Javascript verarbeiten
Nun könnt Ihr die Daten verarbeiten und im Template ausgeben oder mehrere Google Maps Marker mit Infowindow anzeigen lassen.
...
success : function(result) {
console.log(result);
var searchLatLng = {
lat : result['lat'],
lng : result['lng']
};
// NEW POSITION
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 14,
center : searchLatLng
});
var marker = new google.maps.Marker({
map : map,
position : searchLatLng,
animation : google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: 'Lat: ' + result['lat'] + '
Lng: ' + result['lng']
});
infowindow.open(map,marker);
// ADD MARKER TO ARRAY
markers.push(marker);
},
...
Ich hoffe Euch gefällt meine Anleitung „Google Maps API mit Adresse benutzen“ und ich konnte Euch mit meinem Beispiel etwas helfen. Über Lob und Kritik in den Kommentaren würde ich mich sehr freuen.
Hi,
Thank you for the tutorial. I am unable to generate the same results and wonder if it is possible for you zip all files, i.e. php, html, js, css and share it? If so, kindly share with me on ahmedhussain85@yahoo.com Thank you!
Hi Oli, vielen Dank für diesen Beitrag. Hätte mal ne kurze Frage …. wenn ich das in meinem Google Konto bei der Freischaltung der API’s alles richtig deute, ist die Nutzung der Geocoding-API von Google Maps nicht mehr kostenlos ? Seh ich das richtig, dass es kein freies Kontingent gibt?
Hey tonzen,
die Nutzung ist solange kostenlos bis das Kontingent, welches dir jeden Monat gutgeschrieben wird (200€), aufgebraucht wird.
Siehe die Preisliste: https://cloud.google.com/maps-platform/pricing?authuser=0&hl=de
Lg Oli
Hallo Oli,
vielen dank für das super Tutorial,
eine Frage hätte ich noch: ist es möglich, auch diese „rote Umrandung“, z. B. für eine Gemeinde oder eine Stadt, so wie es in Google Maps dargestellt ist, auch für die eigene Darstellung anzeigen zu lassen.
Danke dir,
Grüße
Stefan