www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Linki do innych serwisów mapowych

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Ten poradnik będzie krótki i dość wyjątkowy pod względem treści. Skupimy się w nim na umożliwieniu oglądania aktualnego widoku mapy w innych, konkurencyjnych serwisach mapowych, takich jak Yahoo! Maps, Zumi.pl i Live Maps.

Przyciski pod mapą

Pod mapą dodane zostaną trzy przyciski, odpowiednio dla każdego serwisu:

<ul id="inne">
	<li><a href="#" onclick="window.open(konwersja('yahoo',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Yahoo! Maps</a></li>
	<li><a href="#" onclick="window.open(konwersja('zumi',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Zumi</a></li>
	<li><a href="#" onclick="window.open(konwersja('live',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Live Maps</a></li>
</ul>

Funkcja konwersja() będzie przyjmować argumenty, na podstawie których wygenerowany zostanie adres danego serwisu mapowego z odpowiednimi parametrami. Potrzebne będą (kolejno): nazwa serwisu, współrzędne środka mapy, poziom przybliżenia oraz aktualnie wybrany typ mapy. Funkcję do generowania URL napiszemy za chwilę. Poniżej wypisany jest kod CSS, dzięki któremu trzy przyciski pod mapą będą milsze dla oka:

#inne
{
	margin: 2px;
	padding: 0;
	list-style: none;
	font-family: Tahoma;
	font-size: 9px;
}

#inne li
{
	float: left;
}

#inne li a
{	
	display: block;
	padding: 2px;
	width: 150px;
	background: #ddd;
	color: black;
	text-decoration: none;
	margin: 0 2px 2px 0;
	border: 1px solid #777;
}

#inne li a:hover
{
	border: 1px solid black;
	background: #999;
	color: white;
}

Funkcja, generująca adres

Napisanie samej funkcji jest bardzo proste, problematyczne może być jedynie skonwertowanie parametrów mapy Google na parametry map konkurencyjnych serwisów. Przykładowo, w serwisie Zumi jest tylko 10 poziomów przybliżenia, i są one numerowane rosnąco (tzn. im bliższy poziom przybliżenia tym mniejsza wartość numeryczna). Analogicznie, linki do serwisów będą różnić się nazwami zmiennych, ich kolejnością, formatem itp. Poniższa tabelka zbiera dane, które udało mi się empirycznie zaobserwować:

parametr Google Maps Yahoo! Maps Zumi.pl Live Maps
dostępne poziomy przybliżenia 1-19 (im większy numer, tym większe przybliżenie) 2-18 (im większy numer, tym większe przybliżenie) 1-10 (im mniejszy numer, tym większe przybliżenie) 1-19 (im większy numer, tym większe przybliżenie)
dostępne typy map mapa, satelita, hybryda, mapa fizyczna mapa, satelita, hybryda mapa, satelita, hybryda mapa (road), satelita (aerial), hybryda
sposób konwersji poziomu przybliżenia (gdzie X to poziom przybliżenia w Google Maps) - = X - 1 = 19 - X = X
sposób konwersji trybu mapy - G_HYBRID_MAP: h
G_SATELLITE_MAP: s
G_NORMAL_MAP: m
G_PHYSICAL_MAP: m
G_HYBRID_MAP: 3
G_SATELLITE_MAP: 2
G_NORMAL_MAP: 1
G_PHYSICAL_MAP: 1
G_HYBRID_MAP: h
G_SATELLITE_MAP: a
G_NORMAL_MAP: r
G_PHYSICAL_MAP: r
format adresu - http://www.zumi.pl/namapie.html?long=LNG&lat=LAT&type=TYP_MAPY&scale=ZOOM http://maps.yahoo.com/#mvt=TYP_MAPY&lat=LAT&lon=LNG&zoom=ZOOM http://maps.live.com/default.aspx?cp=LAT~LNG&style=TYP_MAPY&lvl=ZOOM

Posiadające te informację jesteśmy w stanie napisać funkcję konwersja(), która zwróci odpowiedni adres URL:

function konwersja(typ,punkt,zoom,tryb)
{
	var lat = punkt.lat();
	var lng = punkt.lng();
	if(typ=='zumi')
	{
		if(zoom>18)
			var nowyzoom = 1;
		else if(zoom<9)
			var nowyzoom = 10;
		else
			var nowyzoom = 19-zoom;
		if(tryb == G_HYBRID_MAP)
			var nowytyp = 3;
		else if(tryb == G_SATELLITE_MAP)
			var nowytyp = 2;
		else
			var nowytyp = 1;
		var url = 'http://www.zumi.pl/namapie.html?long='+lng+'&lat='+lat+'&type='+nowytyp+'&scale='+nowyzoom;
	}
	else if(typ=='yahoo')
	{
		if(zoom-1>18)
			var nowyzoom = 18;
		else if(zoom-1<2)
			var nowyzoom = 2;
		else
			var nowyzoom = zoom-1;
		if(tryb == G_HYBRID_MAP)
			var nowytyp = 'h';
		else if(tryb == G_SATELLITE_MAP)
			var nowytyp = 's';
		else
			var nowytyp = 'm';
		var url = 'http://maps.yahoo.com/#mvt='+nowytyp+'&lat='+lat+'&lon='+lng+'&zoom='+nowyzoom;
	}
	else if(typ=='live')
	{
		var nowyzoom = zoom;
		if(tryb == G_HYBRID_MAP)
			var nowytyp = 'h';
		else if(tryb == G_SATELLITE_MAP)
			var nowytyp = 'a';
		else
			var nowytyp = 'r';
		var url = 'http://maps.live.com/default.aspx?cp='+lat+'~'+lng+'&style='+nowytyp+'&lvl='+nowyzoom;
	}
	return url;
}

I gotowe, teraz użytkownik może zobaczyć aktualnie oglądany obszar w swoim ulubionym serwisie (otwieranym w nowym oknie): przykład 1pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Kategorie markerów i polilinii

API v2

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wbudowane kontrolki i sterowanie

API v2

Kurs podstaw cz. VI: Dodawanie wbudowanych kontrolek i definiowanie sterowania mapy