Google Map API – Geocoding – Adresse anstelle von Latitude und Longitude

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.

Beispiel: https://maps.googleapis.com/maps/api/geocode/json?address=alexanderplatz-berlin-deutschland&key=YOUR_API_KEY

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:

javascript
				{
   "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"
}
			
Mehr anzeigen

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.

html
				<input id="address" type="text" />
<div id="find">Geocoding</div>
<div id="map"></div>
			
Mehr anzeigen

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.

javascript
				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: '<strong>Lat:</strong> ' + result['lat'] + '<br><strong>Lng:</strong> ' + result['lng']
					});
					infowindow.open(map,marker);
					
					// ADD MARKER TO ARRAY
					markers.push(marker);
				},
				error		:	function (xhr, ajaxOptions, thrownError) {
					alert(xhr.status);
					alert(thrownError);
				}
			});
		}
	}
}
			
Mehr anzeigen

Zusätzlich müsst Ihr noch die .js einbinden:

plaintext
				https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete
			
Mehr anzeigen

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.

php
				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 );
}
			
Mehr anzeigen

4 Kommentare

Schreibe ein Kommentar zu Google Map API – Geocoding – Adresse anstelle von Latitude und Longitude

  1. avatar ahmedAhmed sagt:

    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!

  2. avatar tonzentonzen sagt:

    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?

  3. avatar stefan74Stefan74 sagt:

    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

Hinterlasse ein Kommentar zum Beitrag "Google Map API – Geocoding – Adresse anstelle von Latitude und Longitude"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Eine Website für deine Fans? Ich mach’s möglich.