RkBlog

Hardware, programming and astronomy tutorials and reviews.

Mapy Google na własnej stronie z pomocą jQuery

Bezbolesne wstawianie mapek Google na strony za pomocą pluginu googlemaps.

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:

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

1 January 2011;

Comment article