کنترل‌های نقشه‌های گوگل

نقشه گوگل - کنترل‌های پیش‌فرض

وقتی که نقشه استاندارد گوگل نمایش داده می‌شود، مجموعه کنترل‌های پیش‌فرض را ارائه می‌دهد:

  • بزرگنمایی (Zoom) - نمایش اسلایدر یا دکمه‌های "+/-" برای کنترل سطح بزرگنمایی نقشه
  • حرکت (Pan) - نمایش کنترل حرکت برای حرکت دادن نقشه
  • نوع نقشه (MapType) - اجازه می‌دهد کاربران بین نوع نقشه (نقشه راه و نقشه ماهواره‌ای) جابجا شوند
  • نمای خیابان (Street View) - نمایش نماد کوچک شخصک (Pegman icon) که می‌توان آن را به نقشه حرکت داد تا نمای خیابان فعال شود

نقشه گوگل - کنترل‌های بیشتر

در علاوه بر کنترل‌های پیش‌فرض، نقشه گوگل همچنین ارائه می‌دهد:

  • مقیاس (Scale) - نمایش عنصر مقیاس نقشه
  • چرخش (Rotate) - نمایش نماد کوچک دایره‌ای که به شما اجازه می‌دهد نقشه را بچرخانید
  • نقشه جامع (Overview Map) - نمایش نقشه‌ای کوچک به عنوان پیش‌نمایش نقشه، که نمای کلی منطقه وسیع‌تری را نشان می‌دهد

شما می‌توانید مشخص کنید که چه کنترل‌هایی در هنگام ایجاد نقشه نمایش داده شوند (در MapOptions) یا از طریق فراخوانی setOptions() تنظیمات نقشه را تغییر دهید.

نقشه گوگل - غیرفعال کردن کنترل‌های پیش‌فرض

شاید بخواهید کنترل‌های پیش‌فرض را غیرفعال کنید.

در این مورد، ویژگی disableDefaultUI نقشه (در جعبه تنظیمات نقشه) را به true تنظیم کنید:

مثال

var mapOptions {disableDefaultUI: true}

نقشه گوگل - باز کردن همه کنترل‌ها

برخی از کنترل‌ها به طور پیش‌فرض در نقشه نمایش داده می‌شوند؛ در حالی که برخی دیگر نمایش داده نمی‌شوند، مگر اینکه شما آنها را تنظیم کنید.

لطفاً در جعبه تنظیمات نقشه، کنترل‌هایی که می‌خواهید به نقشه اضافه یا حذف کنید را مشخص کنید.

کنترل‌ها را به true تنظیم کنید تا قابل مشاهده باشند - کنترل‌ها را به false تنظیم کنید تا پنهان شوند.

این مثال همه کنترل‌ها را باز می‌کند:

مثال

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

گوگل‌مپ - تغییر کنترل‌ها

برخی از کنترل‌های نقشه قابل تنظیم هستند.

می‌توانید با تعیین فیلد گزینه‌های کنترل، کنترل را تغییر دهید.

به عنوان مثال، در فیلد zoomControlOptions گزینه‌هایی برای تغییر کنترل بزرگنمایی تعیین شده است. فیلد zoomControlOptions ممکن است شامل موارد زیر باشد:

  • google.maps.ZoomControlStyle.SMALL - نمایش کنترل کوچک بزرگنمایی (فقط دکمه‌های + و -)
  • google.maps.ZoomControlStyle.LARGE - نمایش کنترل اسلایدر بزرگنمایی استاندارد
  • google.maps.ZoomControlStyle.DEFAULT - انتخاب بهترین کنترل بزرگنمایی بر اساس دستگاه و اندازه نقشه

مثال

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

توجه: برای تغییر کنترل، ابتدا آن را فعال کنید (آن را به true تنظیم کنید).

کنترل دیگری که قابل تنظیم است کنترل MapType است.

فیلد mapTypeControlOptions شامل گزینه‌هایی است که برای تغییر کنترل استفاده می‌شود. فیلد mapTypeControlOptions ممکن است شامل موارد زیر باشد:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - نمایش یک دکمه برای هر نوع نقشه
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - انتخاب نوع نقشه از طریق منوی فله‌ای
  • google.maps.MapTypeControlStyle.DEFAULT - نمایش رفتار پیش‌فرض (“پیش‌فرض”) (بستگی به اندازه صفحه نمایش دارد)

مثال

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

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

مثال

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}