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.

Logo firmy/strony na mapie

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Ten prosty tutorial pokaże Ci, w jak prosty sposób dodać wizualną identyfikację Twojej firmy/strony do mapy - dodamy do niej logo, którego pozycja będzie stała względem ekranu.

Logo bez przezroczystości

Logo będzie zaimplementowane przez użycie klasy GControl(), dzięki czemu nie trzeba będzie zajmować się technikaliami pozycjonowania na mapie. Na potrzeby kursu przygotowałem logo o wymiarach 28x26:

Przykładowe logo

Jest to PNG bez kanału alfa (wszystkie jego piksele są nieprzezroczyste). Równie dobrze można użyć obrazka w formacie JPG lub GIF.

W kodzie tworzymy nową klasę, dziedziczącą po GControl():

function WlasneLogo() {}
WlasneLogo.prototype = new GControl();

Prototypujemy metodę initialize:

WlasneLogo.prototype.initialize = function(mapa)
{
	var logo = document.createElement('div');
	logo.id = 'logo';

	mapa.getContainer().appendChild(logo);  
	return logo; 
}

Po lekturze kursu Dodawanie własnych kontrolek na mapę zrozumienie działania powyższego kodu nie jest trudne - tworzymy element DIV, nadajemy mu id "logo", po czym dodajemy go do kontenera z mapą i zwracamy odwołanie do niego dla potrzeb API.

Domyślną pozycją logo będzie 5 px od prawej krawędzi mapy i 20px od dolnej krawędzi (zostawiamy trochę miejsca na prawa autorskie). Prototyp funkcji, zwracającej domyślną pozycję kontrolki będzie wyglądał tak:

WlasneLogo.prototype.getDefaultPosition = function()
{
	return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 20));
}

Kontrolkę dodajemy do mapy za pomocą następującego kodu:

mapa.addControl(new WlasneLogo());

Ostatnią (lecz bardzo ważną) rzeczą jest dodanie kodu CSS, odpowiadającego za wygląd logo. Dla przygotowanego obrazka o wymiarach 28 x 26 i lokalizacji URL w katalogu /examplest/032/logo.png będzie to następująca postać:

<style type="text/css">
	#logo
	{
		background: url('/examples/032/logo.png');
		width: 28px;
		height: 26px;
		border: 0;
	}
</style>

Powyższy kod oczywiście powinien znaleźć się w nagłówku strony. Tak skonstruowany przykład będzie działał następująco: przykład 1pokaż kod przykładu

Przezroczystość i link

Logo w poprzednim przykładzie było nieprzezroczyste. Stworzenie pliku PNG z przezroczystością i wstawienie adresu do niego jest jedynie częściowym rozwiązaniem, bo w Internet Explorer 6 (ciągle najpopularniejsza przeglądarka na świecie) przezroczystość nie jest obsługiwana. Przygotowałem na potrzeby kolejnego przykładu plik z przezroczystym logo (jeden plik umieszczony na czterech różnych tłach), znajdujący się w katalogu /examples/032/knm.png:

Logo Logo Logo Logo

Modyfikacja polega na użyciu hacka, dzięki któremu Internet Explorer wczyta kanał alpha. W tym celu dodajemy za kodem ze stylem poniższy fragment:

<!--[if gte IE 5.5]>
	<![if lt IE 7]>
		<style type="text/css">
			#logo
			{
				background: none;
				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/032/knm.png');
			}
		</style>
	<![endif]>
<![endif]-->

Ten komentarz warunkowy powoduje, że żadna przeglądarka poza Internet Explorerem w wersjach powyżej 5.5 ale poniżej 7 nie zinterpretuje zawartości. Ta zawartość odpowiada za wczytanie kanału alpha z pliku PNG i przetworzenie przez specjalny filtr, dostępny dla przeglądarek Internet Explorer. Dzięki takiemu zabiegowi, kanał przezroczysty zostanie poprawnie wyświetlony.

Samo logo wygląda nieźle, ale przydałaby się jeszcze możliwość podpięcia linka - np. po kliknięciu na logo użytkownik powinien zostać przeniesiony do strony firmy. Nic prostszego, przy tworzeniu elementu DIV należy dodać dodatkową linijkę (w poniższym listingu jest to linijka numer 5 - dzięki niej po kliknięciu przeglądarka skoczy do strony knm.home.pl):

WlasneLogo.prototype.initialize = function(mapa)
{
	var logo = document.createElement('div');
	logo.id = 'logo';
	logo.onclick = function() { window.location = 'http://knm.home.pl'; }
	
	this.mapa = mapa;             
	this.div = logo;
	
	mapa.getContainer().appendChild(logo);  
	return logo; 
}

Aby zaznaczyć możliwość kliknięcia, należy ustawić kursor nad logo na "rączkę" - robi się to poprzez dodanie dodatkowej linijki cursor: pointer do stylu CSS dla obiektu z logo. Po modyfikacjach będzie to wyglądać tak:

<style type="text/css">
#logo
{
	background: url('/examples/032/knm.png');
	width: 49px;
	height: 39px;
	border: 0;
	cursor: pointer;
}
</style>

Przykład, pokazujący użycie logo z przezroczystością oraz linku wygląda następująco: przykład 2pokaż kod przykładu

Uwagi

Jeśli używasz obrazka GIF z zapisaną przezroczystością nie musisz stosować hacka dla Internet Explorera - wszystkie przeglądarki poprawnie obsługują ten element.

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