Bardzo czÄ™sto mapy Google wykorzystywane sÄ… do prezentacji konkretnych lokalizacji – takich jak siedziba firmy czy miejsc w ktĂłrych odbywajÄ… siÄ™ pewne wydarzenia i  jak juĹĽ wiemy uĹĽywamy do tego markerĂłw. W poniĹĽszej publikacji postaram siÄ™ przybliĹĽyć kilka ciekawych metod uĹĽycia markerĂłw na mapach Google.

Jako bazÄ™ dla naszych dziaĹ‚aĹ„ uĹĽyjemy przykĹ‚ad z poprzedniego artykuĹ‚u Google Maps API – Marker prosty.

Marker animowany

Animację dodajemy poprzez ustawienie właściwości setAnimation(google.maps.Animation). Dla naszego markera zrobimy to następująco:

marker1.setAnimation(google.maps.Animation.BOUNCE);

Dzięki takiemu rozwiązaniu możemy dodać animację dynamicznie, wywołując ją z poziomu dowolnej funkcji JavaScript. Możemy również użyć właściwości Animation w obiekcie markera:

  var marker1 = new google.maps.Marker({
position: mojaPozycja1,
map: map,
animation: google.maps.Animation.BOUNCE,
title: ‚Pozycja 1 !’
});

 Własna grafika jako marker

Bardzo efektowną modyfikacją mapy Google jest użycie własnej grafiki w celu oznaczenia miejsca, które prezentujemy. Zaczynamy od deklaracji obiektu grafiki:

var image = ‚marker.png’;

Dodajemy właściwość icon i przypisujemy jej wartość image dla obiektu marker:

var marker2 = new google.maps.Marker({
position: mojaPozycja2,
map: map,
title: ‚Pozycja 2 !’,
icon: image
});

mapa1

Print Friendly, PDF & Email