Google Maps API 3 – marker, listener, zdarzenie

Rozszerzenie możliwości mapy o stawianie markerów i obsługę zdarzeń związanych z myszką.

Kod z poprzedniego wpisu modyfikujemy w następujący sposób:

<html>
 
<head>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
var mapa;
 
function inicjalizacja() {
 
  var latlng = new google.maps.LatLng(52,19.5);	
  var mojeUstawienia = {
    zoom: 11, //!!zmienione powiekszenie!!										
    center: latlng, 								
    mapTypeId: google.maps.MapTypeId.ROADMAP 		
  };
 
  mapa = new google.maps.Map(document.getElementById("obszar_mapy"), mojeUstawienia);
  //-------------  dodany obszar kodu, ktory bedzie zmieniany
  var marker = new google.maps.Marker({
    position: latlng, 
    map: mapa
  });
  //-------------  
}
 
</script>
</head>
 
<body onload="inicjalizacja()">
 
<div id="obszar_mapy" style="width:50%; height:50%"></div>
 
</body>
</html>

Zmieniła się skala powiększenia zoom: 11, oraz została dodana definicja nowego obiektu klasy google.maps.Marker. Komentarz //————- obejmuje obszar kodu, który będzie rozwijany poniżej.

Tworzony jest obiekt marker, którego właściwości są opisane w tym momencie dwoma parametrami: position: latlng (współrzędne, które zostały zdefiniowane wcześniej jako środek Polski), oraz map: mapa (określenie na której z naszych map ma się marker pojawić).

Mapa z markerem ustawionym na jej środek

Poszerzony marker o dodatkowe właściwości:

//------------- 
var image = 'http://code.google.com/intl/pl/apis/maps/documentation/v3/examples/images/beachflag.png';
var marker = new google.maps.Marker({
  position: latlng, 
  map: mapa,
  draggable: true,
  icon: image,
  title: "marker testowy",
  flat: true
});
//-------------

Właściwość draggable: true daje możliwość przeciągania markera, title: „marker testowy” pokazuje chmurkę po najechaniu kursorem na marker, a flat: true wyłącza rzucany cień przez marker. Dodatkowo została zmieniona wyświetlona ikona markera – w tym celu tworzymy zmienną, przechowującą ikonę var image i we właściwościach ustawiamy icon: image.

Poniżej ekran z przesuniętym markerem.

Marker postawiony w środku mapu i przesunięty bez cienia

//------------- 
google.maps.event.addListener(mapa, 'click', function() {
  alert('test');
});
var image = 'http://code.google.com/intl/pl/apis/maps/documentation/v3/examples/images/beachflag.png';
var marker = new google.maps.Marker({
  position: latlng, 
  map: mapa,
  draggable: true,
  icon: image,
  title: "marker testowy",
  flat: true
});
//-------------

Do kodu został dodany listner google.maps.event.addListener, który czeka na to aż wykryje kliknięcie ‘click’ na mapie. Gdy kliknięcie zostanie wykryte wywoływana jest funkcja function() i pokazuje się okienko z napisem test wywołane za pomocą funkcji alert(). Zdarzenia, które można wykryć to: click, dblclick (dodatkowo należy wyłączyć domyślną obsługę dblclick, które powiększa mapę), mouseup, mousedown, mouseover oraz mouseout.

Aby połączyć stawianie markera ze zdarzeniem kliknięcia należy zmienić nieco powyższy kod.

//-------------
google.maps.event.addListener(mapa, 'click', function(event) {
 
  var image = 'http://code.google.com/intl/pl/apis/maps/documentation/v3/examples/images/beachflag.png';
  var marker = new google.maps.Marker({
    position: event.latLng, 
    map: mapa,
    draggable: true,
    icon: image,
    title: "marker testowy",
    flat: true
  });
});
//-------------

Podobnie jak poprzednio reagujemy na zdarzenie kliknięcia na mapie, jednak tym razem funkcja function(), jest wywoływana z parametrem event. Obiekt event posiada pole latLng, które zawiera współrzędne naszego kliknięcia. Podstawienie position: event.latLng stawia marker we wskazanym miejscu.

Wszystkie elementy: czyli brak cienia, możliwość przesuwania markerów, posiadanie chmurki są aktywne dla każdego postawionego markera.