رویدادهای نقشه‌های گوگل

با کلیک بر روی نشانه بزرگنمایی کنید

ما همچنان از نقشه‌ای استفاده می‌کنیم که در صفحه قبلی بود: نقشه‌ای با مرکزیت لندن انگلستان.

حالا، ما می‌خواهیم که در زمان کلیک کاربر بر روی نشانه بزرگنمایی انجام دهیم (ما یک برنامه‌کننده رویداد به نشانه متصل می‌کنیم تا در زمان کلیک نقشه را بزرگنمایی کند).

این کد اضافی است:

مثال

// با کلیک بر روی نشانه بزرگنمایی به 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

ما از برنامه‌کننده‌های رویداد addListener() برای ثبت اطلاعیه‌های رویداد استفاده می‌کنیم. پارامترهایی که این روش می‌پذیرد:

• یک شیء
• یک رویدادی که باید شنیده شود
• یک تابعی که در زمان وقوع یک رویداد فراخوانی می‌شود

به نشانه بازگشت

در اینجا، ما تغییرات بزرگنمایی را ذخیره کرده و نقشه را پس از 3 ثانیه جابجا می‌کنیم:

مثال

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);
});

پنجره اطلاعاتی با کلیک بر روی نشانه باز می‌شود

پنجره اطلاعاتی حاوی متن را با کلیک بر روی نشانه نمایش می‌دهد:

مثال

var infowindow = new google.maps.InfoWindow({
  محتوای: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

تنظیم نشانه و باز کردن پنجره اطلاعاتی برای هر نشانه

این تابع زمانی اجرا می‌شود که کاربر روی نقشه کلیک کند.

placeMarker() تابعی است که در موقعیت کلیک کاربر یک نشانه قرار می‌دهد و یک پنجره اطلاعاتی شامل عرض و طول جغرافیایی آن نشانه را نمایش می‌دهد:

مثال

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    موقعیت: location,
    نقشه: map
  });
  var infowindow = new google.maps.InfoWindow({
    经度: ' + location.lat() +
    纬度: ' + location.lng()
  });
  infowindow.open(map,marker);
}