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.

Jeden klucz, wiele domen

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Często otrzymuję pytania na temat możliwości skonstruowania mapy w sytuacji, gdy ma być ona dostępna pod wieloma domenami. W takiej sytuacji skrypt API sprawdza poprawność klucza, a stwierdzając jego niezgodność z domeną wyświetla komunikat o błędzie i nie uruchamia mapy. Ręczne zmienianie klucza wchodzi w grę, gdy mapa dostępna jest w trzech egzemplarzach, po jednym dla każdej domeny. Co jednak zrobić, gdy do jednej mapy mamy wiele domen, a chcemy używać jednego klucza?

Rozwiązanie jest proste. Należy wybrać domenę "główną", do której wygenerowany zostanie klucz API. Stronę z mapą należy rozbić na właściwą stronę zawierającą mapę, oraz na stronę, na której mapa będzie wyświetlana. Mapę należy wstawić do czystego pliku HTML ze zdefiniowanymi marginesami i paddingiem równymi 0. Przykładowo, kod html pliku mapa.html, którego będę używał w tym przykładzie wygląda następująco:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'   
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>   
<html xmlns='http://www.w3.org/1999/xhtml'>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
        <title>Przykład</title>  
		<script src='http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRI4aQRVVUPNMvSBmcMpGJI7P0YchSX0OZ5KbkwNpcfvcT6uTX6aqFYAQ' type='text/javascript'></script> 
		<style type="text/css">
		body,html
		{
			margin: 0;
			padding: 0;
		}
		</style>
    </head>
    <body onload='mapaStart()' onunload='GUnload()'>  
	<div id="mapka" style="width: 600px; height: 500px; background: gray;"></div>
	<script type='text/javascript'>
	<!--
		var mapa;
		
		function mapaStart()
		{
			if(GBrowserIsCompatible())  
			{
				mapa = new GMap2(document.getElementById("mapka"));
				mapa.addControl(new GLargeMapControl());
				mapa.setCenter(new GLatLng(37.642647000000004,-122.272251),9);
			}
		}
		
	-->	
	</script>
    </body>   
</html> 

Ten plik znaduje się pod adresem http://gmapsapi.com/examples/064/mapa.html, i to na ten adres został wygenerowany klucz API. Teraz wystarczy załadować tę stronę w ramce iframe na stronie, na której mapa ma się faktycznie znaleźć, wstawiając kod:

<iframe id="mapka" style="width: 600px; height: 500px; border: 1px solid black;" src="http://gmapsapi.com/examples/064/mapa.html"></iframe>

Podanie adresu bezwględnego (z http://) oszczędzi wiele problemów. Zwróć uwagę, że rozmiary iframe są takie same jak rozmiary mapy w pliku mapa.html - to stworzy złudzenie, że mapa jest osadzona bezpośrednio w kodzie przykładu. Ponieważ mapa znajduje się w pliku mapa.html, a jego domena jest zawsze ta sama (adres bezpośredni) to wynik sprawdzania klucza będzie zawsze pozytywny, niezależnie od adresu strony-rodzica.

Działanie mapy pokazuje przykład: przykład 1pokaż kod przykładu

Właściwy plik z mapą znajdziesz tu

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


Wczytywanie danych z programu MS Excel

API v2

W tym przykładzie pokazane zostało, w jaki sposób wyświetlić markery z arkusza kalkulacyjnego


Własna mapa w Google Maps API

API v2

Przygotowanie i sposób stworzenia własnej mapy, na przykładzie mapy z gry GTA3


Warstwa zdjęć z Panoramio

API v2

Dodaj na swoją mapę eleganckie miniaturki zdjęć okolicy z serwisu Panoramio