Nuna kai tsaki kai tsa

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

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

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

این کد اضافه شده:

مثال

// با کلیک روی مارکر بزرگنمایی به 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({
  content: "مرحبا بالعالم!"
});
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({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'latitude: ' + location.lat() +
    '<br>longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}