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 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: