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.

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:

{
   "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:

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.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.