Event ng Google Maps

Zoom kapag pinindot ang marka

Kami ay gumagamit pa rin ng map na ginamit sa nakaraang pahina: ang map na nakasentro sa London, UK.

Ngayon, nais naming ay gamitin ang zoom kapag pinindot ng user ang marka (tinataas ang zoom kapag pinindot ang marka sa map).

Ito ang kodigo na idinagdag:

Egemplo

// Pagpinindot ng marka, ay zoom sa 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Ginagamit namin ang addListener() na event handler upang rehistrar ang mga notification ng event. Ang argumento na tinatanggap ng paraan na ito ay:

• Isang bagay
• Isang pangyayari na dapat mapagmasdan
• Isang function na magsasalita kapag mangyari ang isang espesyal na pangyayari

Ibalik ang map sa marka

Dito, inilalagay namin ang pagbabago ng zoom at ililipat ang map pagkatapos ng 3 segundo:

Egemplo

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

Buksan ang InfoWindow kapag pinindot ang marka

Buksan ang InfoWindow na naglalaman ng teksto kapag pinindot ang marka:

Egemplo

var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Itatayo ang marka at buksan ang InfoWindow para sa bawat marka

Ang function na ito ay magsasalita kapag pinindot ng user ang map.

placeMarker() Function ay maglagay ng isang marka sa lokasyon na pinindot ng user at magpakita ng isang InfoWindow na naglalaman ng latitude at longitude ng marka:

Egemplo

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitud: ' + location.lat() +
    '<br>Longitud: ' + location.lng()
  });
  infowindow.open(map,marker);
}