websta.pl

Obecnie na większości stron firmowych umieszcza się mapy z lokalizacją. Najczęściej używa się do tego Google Maps. Wstawienie mapy na stronę jest banalnie proste, wystarczy skopiować podany kod iframe. Problem pojawia się, gdy nie odpowiadają nam dane zawarte w chmurce, chcemy ją domyślnie ukryć lub marker znajduje się w złym miejscu.

Przygotowałem plugin jQuery – Mapsta używający google.maps.api V3, który ułatwia wstawianie map, pokazywanie i ukrywanie chmurki, wstawianie do niej kodu html i kilka dodatkowych opcji. Oczywiście wykorzystuje on pewnie 1% tego, co można zrobić z api, ale zależało mi na tym, żeby działał prosto i obsługiwał najbardziej popularne funkcje.

demo | pobierz.zip

Jak używać

Lokalizacja

Na początek musimy znać długość i szerokość geograficzną wybranej lokalizacji. Można to zrobić na wiele sposobów. Użyjemy do tego http://mapy.google.pl/ . Po znalezieniu naszego miejsce (i ew. przestawieniu markera) pobieramy link:

W linku znajdują się współrzędne wybranego punktu, których użyjemy do wstawiania naszej mapy:

Wstawianie mapy

Skopiuj plik jquery.mapsta.min.js do odpowiedniego katalogu. W kodzie strony dołącz bibliotekę jQuery (jeśli jeszcze nie używasz), google.maps.api (V3 nie wymaga już generowania klucza) oraz plugin (pamiętaj, żeby podać dobrą ścieżkę).

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.mapsta.min.js"></script>

w odpowiednim miejscu wstaw div na mapę (ja użyję id=”mapa”):

<div id="mapa"></div>

w css nadaj mu wymiary (będa to wymiary mapy) np.

#mapa { width:500px; height:400px; }

teraz już tylko wystarczy podać dane punktu i wybrać dodatkowe opcje, które Ci pasują.

Przykład prostego użycia

<script type="text/javascript">
 
	$(function(){ 
 
		$('#mapa').mapsta({
			pozycjas: 52.398727,
			pozycjad: 17.006836 
		});
 
	});
 
</script>

Mapa z markerem, tytułem markera, chmurką (po kliknięciu), widokiem z satelity i wyłączoną nawigacją:

<script type="text/javascript">
 
	$(function(){ 
 
		$('#mapa2').mapsta({
			pozycjas: 52.398727,
			pozycjad: 17.006836,
			tytul: 'Tytuł markera', 
			opis: '<h2>Słoniarnia</h2><p>Słoniarnia w Poznańskim Nowym ZOO</p>',
			nawigacja: 'nie',
			typ: 'satelita'
		});
 
	});
 
</script>

Wszystkie opcje pluginu, których możesz użyć:

pozycjas: --- szerokość geograficzna
pozycjad: ---długość geograficzna
 
zoom: --- powiększenie mapy cyfry od 1 (domyślnie 18)
nawigacja: --- tak/nie - menu nawigacyjne na mapie
typ:  --- rodzaj mapy: mapa, teren, satelita, hybryda
 
chmurka: --- otwarta/zamknieta - stan chmurki po wczytaniu mapy (domyślnie zamknięta), bez markera zawsze otwarta
opis: --- zawartość chmurki - kod html
szerokosc: --- maksymalna szerokość chmurki
 
tytul: --- tytuł markera po najechaniu (tak jak title przy linku)
marker: --- tak/nie pokazanie markera

Licencja

Możesz:

• za darmo używać skryptu w projektach niekomercyjnych i komercyjnych (np. na stronach Twoich klientów)
• wprowadzać dowolne zmiany w skrypcie, pamiętając o pozostawieniu danych autora

Nie możesz:

• sprzedawać, rozdawać, ani dystrybuować tego skryptu jako osobnego produktu, jedyne legalne źródło jego pozyskania to strona Websta.pl

Przydatne linki:

• Google Maps V3 – podstawy
• Google Maps V3 – tutoriale
• Google Maps V3 – przykłady
• Google Maps V3 – dema
• Przydatne narzędzie do testowania kodów API

Podsumowanie

Jest to pierwsza wersja pluginu Mapsta dla Google Maps Api V3. Jeśli uważasz, że pominąłem jakieś przydatne funkcje lub znalazłeś błędy – daj mi znać w komentarzach.

demo | pobierz.zip

Tagi: google, google maps, jQuery, mapa, plugin, pobierz, skrypt