Mapy Google na własnej stronie z pomocą jQuery

1 January 2011 Comments

Google udostępnia rozbudowane API pozwalające generować różnorakie mapy w oparciu o Google Maps. Wystarczy umieścić na stronie "fragment" kodu JavaScrip i gotowe. Gdy chcemy wykorzystać liczne dodatkowe opcje to tego kodu robi się znacznie więcej. Na szęście powstały różne nakładki, np. w jQuery upraszczające proces konfiguracji widżeta mapy.

Zanim zaczniemy zabawę z mapami Google musimy wygenerować klucz dla naszej strony na code.google.com. Bez tego widżet odmówi współpracy. Po podaniu adresu naszej domeny dostaniemy klucz API oraz skrypt jaki musimy wkleić na naszą stronę. Nie ma ograniczenia na ilość kluczy API, czy częstotliwość używania mapek. Istnieją jednak ograniczenia na ilość żądań geolokalizacji. Jeżeli chcemy by mapa pokazywała określony punkt na kuli ziemskiej to musimy podać długość i szerokość geograficzną. Jeżeli mamy adres a nie współrzędne to możemy użyć właśnie usługi geolokalizacji adresu - geocoding, ale o tym później.

Do obsługi mapek Google użyjemy googlemaps - wtyczki do jQuery. Wystarczy pobrać plik JS i możemy zaczynać. Podstawowy kod wygląda tak:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 
	'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
	<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KLUCZ_MAP_GOOGLE" type="text/javascript"></script>

	<script src="jquery.googlemaps1.01.js" type="text/javascript"></script>
	
	<script>
$(document).ready(function() { 
	var geocoder = new GClientGeocoder();
	$('#map_canvas').googleMaps({
			geocode: 'Warszawa, Dworzec Centralny',
		}); 

}); 
</script>
	
	</head>
	<body>
	<div id="map_canvas" style="width:400px;height:400px;"></div>
	</body>
</html>

W powyższym przykładzie:

Ładujemy bibliotekę jQuery, następnie bibliotekę Google Maps wraz z naszym kluczem.
Na końcu dołączamy wtyczkę googlemaps i konfigurujemy.
Przykładowa najprostsza konfiguracja zaprezentowana jest powyżej. Na stronie wtyczki znajdziemy masę różnych przykładów obrazujących różne dostępne opcje.
W sekcji BODY umieszczamy DIV o określonym ID. Ten kontener zostanie wykorzystany do wyświetlenia mapy. Należy nadać mu pożądane wymiary.

W powyższym przykładzie nie użyłem współrzędnych geograficznych, a adres, który jest geokodowany. Jeżeli mapa ma być często wyświetlana to można dla uniknięcia problemów z limitami używać współrzędnych geograficznych (np. gdy mamy serwis pełen takich map).

Mając adres warto zaznaczyć go na mapie za pomocą markera. Można zrobić to łącząc API map Google jak i widżeta googlemaps:

<script>
$(document).ready(function() { 
	var geocoder = new GClientGeocoder();

	function showAddress(address) {
		geocoder.getLatLng(
		  address,
		  function(point) {
			if (point) {
			  var x = String(point).replace('(', '').replace(')', '').split(',')
			  $('#map_canvas').googleMaps({
			  geocode: 'Warszawa, Świętokrzyska 1',
					  markers: {
					  latitude: 	x[0],
					  longitude: x[1]
			  }

		  });
			}
		  }
		);
	  }
	showAddress('Warszawa, Świętokrzyska 1');

}); 
</script>

RkBlog

Komponenty i dodatki, 1 January 2011