Google maps api i OpenStreetMap

W artykule pokażę jak zintegrować mapę google maps z OpenStreetMap. W mapie google maps mamy do wyboru różne typy map np. hybrydowa, teren itp. Dodamy nowy typ OpenStreetMap, aby był dostępny z rozwijanego menu (patrz rysunek). Efekt jaki uzyskamy - demo. OpenStreetMap i google maps

Pełny kod strony wyświetlającej mapkę poniżej.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Google maps + Openstreet map - demo</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pl&libraries=drawing"></script>
</head>
<body>
	<div id="mapka" style="width:500px;height:350px;"><!-- miejsce na mapke --></div>
	<script type="text/javascript">
	//Skrypt generujacy mapke
	var Lat = 51.7592485;//latitude
	var Lon = 19.4559833;//longitude
	var Zoom = 9;//zoom
	var mapDiv = document.getElementById('mapka');
	var latlng = new google.maps.LatLng(Lat, Lon);
	var openstreet = new google.maps.ImageMapType({
	getTileUrl: function (point, zoom) {
		return "http://tile.openstreetmap.org/" + zoom + "/" + point.x + "/" + point.y + ".png";
	},
	tileSize: new google.maps.Size(256, 256),
	name: "Open street",
	maxZoom: 18
	});	
	
	var options = {
		center: latlng,
		zoom: Zoom,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		mapTypeControlOptions: {
		mapTypeIds: [  google.maps.MapTypeId.ROADMAP,
					   google.maps.MapTypeId.TERRAIN,
					   google.maps.MapTypeId.SATELLITE,
					   google.maps.MapTypeId.HYBRID,
					   "OPEN_STREET"],
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		}
	};
	var mapa = new google.maps.Map(mapDiv, options);
	mapa.mapTypes.set("OPEN_STREET", openstreet);
	</script>
</body>
</html>

Omówię teraz jego najważniejsze elementy. Mapa będzie wyświetlana w divie o id mapka. W skrypcie definiujemy przydatne zmienne: lat, lon środka mapy oraz zoom. Łapiemy ponadto w zmiennej mapDiv odpowiedni div, gdzie ma być wyświetlana mapa oraz tworzymy zmienną latlng, pod którą zapisujemy odpowiedni obiekt LatLng. Najważniejszą częścią jest stworzenie nowego typu mapy dla Openstreet.

var openstreet = new google.maps.ImageMapType({
getTileUrl: function (point, zoom) {
	return "http://tile.openstreetmap.org/" + zoom + "/" + point.x + "/" + point.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Open street",
maxZoom: 18
});

Na koniec definiujemy opcje mapy uwzględniając w opcjach kontroli nasz nowy typ. Dodajemy mapę przekazując jej parametry mapDiv i options oraz ustawiamy aby pod indeksem OPEN_STREET była mapa OpenStreet (mapa.mapTypes.set("OPEN_STREET", openstreet)).

var options = {
	center: latlng,
	zoom: Zoom,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: true,
	mapTypeControlOptions: {
	mapTypeIds: [  google.maps.MapTypeId.ROADMAP,
				   google.maps.MapTypeId.TERRAIN,
				   google.maps.MapTypeId.SATELLITE,
				   google.maps.MapTypeId.HYBRID,
				   "OPEN_STREET"],
	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
	}
};
var mapa = new google.maps.Map(mapDiv, options);
mapa.mapTypes.set("OPEN_STREET", openstreet);

Demo Google maps api + OpenStreetMap