Webstack
Bejelentkezés

Elfelejtetted a jelszavad?

Nem vagy még tag? Kattints ide és regisztrálj most!

Google Maps Geocoding API – példák

Google Developers | tomizej  | 2013-05-27 05:41:19

Korábbi cikkünkben olvashattunk arról, hogy mire jó a Geocoding API és milyen lehetőségei vannak. Ebben a cikkben konkrét példákat fogunk látni Javascript és PHP nyelven. Megnézzük, hogyan lehet kombinálni az API-kat.

Geocoding API – (Geokódolás) Javascript környezetben

A google maps biztosít a geokódoláshoz Javascript felületet is. Rendkívül hasznos, hogy JS-ből is tudjuk használni közvetlen a google web szolgáltatásokat is.

 

Az alábbi példában egy HTML input elemből beolvassuk a címet és a Geocoding API segítségével megjelnítjük a térképen.

 

HTML:

<div>
	<h2>Geokódolás</h2> 
	Cím: <input type="text" onChange="geoCodeAddr(this.value)" placeholder="Írd be a címet" />
</div><br />
<div id="gmap_canvas" style="width:80%; height: 50%;"></div>

JavaScript:

var map, geocoder;

function initialize() {
	var latlng = new google.maps.LatLng(-34.397, 150.644);
	var mapOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("gmap_canvas"), mapOptions);
	geocoder = new google.maps.Geocoder();
}

function geoCodeAddr(address) {
	geocoder.geocode({'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location
			});
		} else {
			alert("Geokódolás nem sikerült, a következő okok miatt: " + status);
		}
	});
}


window.onload = function() {
	initialize();
};

A Geocoding szolgáltaltásokhoz a google.maps.Geocoder objektumon keresztül tudunk hozzáférni. Aszinkron módon történik a kommunikáció, az APInak külső szolgáltatást kell hívnia, ezért a kérés sikerességekor egy callback függvényt szükséges meghívni. Az aszinkron hívást a Geocoder.geocode() metóduson keresztül érhetjük el, ami egy Objektum literált vár, amiben jelen esetben a címet kell megadni, amit az input mező értékéből olvasunk ki.

 

A GeocoderRequest objektum lehetséges elemei:

{
 address: string,
 latLng: LatLng,
 bounds: LatLngBounds,
 region: string
}
geocoder.geocode({'address': address}, function(results, status) { … }

Ha a GeoCodeing API sikeresen visszadta a címhez tartozó földrajzi információkat,

a callback függvényben kezelni kell a választ. A visszaadott koordináták alapján beállítjuk a térképet középre és elhelyezünk egy jelölőpontot:

map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
});

 

Online Példa megtekintéséhez kattints ide!

 

Inverz geokódolás (Reverse Geocoding) – Javascript környezetben

A fordított geokódolásnál ugyanaz a teendőnk, mint a normál módszernél. A különbség annyi, hogy a Geocoder.geocode() metódusnak a cím helyett a koordinátákat kell megadni.

 

Az alábbi példában a térképen kattintva lekérdezzük egy click eseménnyel, hogy mely koordinátára kattintottunk, majd ezt a geocoding API segítségével visszafejtjük és megjelenítjük egy információs buborékban.

 

Online Példa megtekintéséhez kattints ide!

 

Geocoding API hívása szerver oldalról – PHP környezetben

A Geocoding API szerver oldalról történő hívását PHP-ben legegyszerűbben curl-al tudjuk megoldani. Lényegében küldünk egy http kérést az API url-re és fogadjuk a választ, ugyanúgy mintha a böngészőbe írtuk volna be.

$addr = 'Eger Liget u. 12';
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' . urldecode($addr) . '&sensor=false'; $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($ch, CURLOPT_HEADER, 0); //@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ch, CURLOPT_URL, $url); $response = curl_exec($ch); curl_close($ch); //JSON válasz. tömbbé alakítás $geocode = json_decode($response);

Szerver oldalról történő hívásokat legjobban adminisztrációs felületeken tudjuk kihasználni, ahol a szervernek küldött cím, vagy koordináta adatokból kell leképezni a földrajzi információkat. Tipikus eset pl.: Mikor szállodák, cégek címeit visszük fel, a rendszerünk pedig a háttérben a Geocoding API segítségével lekérdezi a GPS koordinátákat.

 

Online Példa megtekintéséhez kattints ide!

 

Szerző: tomizej

címkék
Címkék: tutorial, javascript, php,

Hozzászólások

Hozzászóláshoz be kell jelentkezni!

Keress minket Facebookon
Ajánlások