اعلامیه: سبک نقشه پایه جدید به زودی به پلتفرم نقشه های گوگل می آید. این به‌روزرسانی برای استایل نقشه شامل یک پالت رنگی پیش‌فرض جدید، پین‌های مدرن شده و بهبودهایی در تجربه‌ها و قابلیت استفاده از نقشه است. همه سبک‌های نقشه به‌طور خودکار در مارس 2025 به‌روزرسانی می‌شوند. برای اطلاعات بیشتر در مورد در دسترس بودن و نحوه انتخاب زودتر، به سبک نقشه جدید برای پلتفرم Google Maps مراجعه کنید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

کنترل ها

پلتفرم را انتخاب کنید: Android iOS JavaScript

بررسی اجمالی کنترل ها

نقشه‌هایی که از طریق Maps JavaScript API نمایش داده می‌شوند حاوی عناصر UI هستند تا امکان تعامل کاربر با نقشه را فراهم کنند. این عناصر به عنوان کنترل شناخته می شوند و می توانید تغییراتی از این کنترل ها را در برنامه خود قرار دهید. از طرف دیگر، نمی‌توانید کاری انجام دهید و اجازه دهید Maps JavaScript API تمام رفتارهای کنترلی را مدیریت کند.

نقشه زیر مجموعه پیش فرض کنترل های نمایش داده شده توسط Maps JavaScript API را نشان می دهد:

در زیر لیستی از مجموعه کامل کنترل‌هایی که می‌توانید در نقشه‌های خود استفاده کنید آمده است:

کنترل زوم دکمه های "+" و "-" را برای تغییر سطح بزرگنمایی نقشه نمایش می دهد. این کنترل به طور پیش فرض در گوشه سمت راست پایین نقشه ظاهر می شود.
کنترل دوربین دارای هر دو کنترل بزرگنمایی و حرکت می باشد و در هنگام استفاده از کانال بتا به طور پیش فرض به جای کنترل زوم نمایش داده می شود.
کنترل Map Type به سبک نوار دکمه کشویی یا افقی موجود است و به کاربر امکان می دهد نوع نقشه ( ROADMAP ، SATELLITE ، HYBRID ، یا TERRAIN ) را انتخاب کند. این کنترل به طور پیش فرض در گوشه سمت چپ بالای نقشه ظاهر می شود.
کنترل نمای خیابان حاوی یک نماد آدمک است که می تواند روی نقشه کشیده شود تا نمای خیابان فعال شود. این کنترل به طور پیش فرض در نزدیکی سمت راست پایین نقشه ظاهر می شود.
کنترل چرخش ترکیبی از گزینه‌های شیب و چرخش را برای نقشه‌های حاوی تصاویر مایل فراهم می‌کند. این کنترل به طور پیش فرض در نزدیکی سمت راست پایین نقشه ظاهر می شود. برای اطلاعات بیشتر به تصاویر 45 درجه مراجعه کنید.
کنترل مقیاس یک عنصر مقیاس نقشه را نمایش می دهد. این کنترل به طور پیش فرض غیرفعال است.
کنترل تمام صفحه گزینه باز کردن نقشه در حالت تمام صفحه را ارائه می دهد. این کنترل به طور پیش فرض در دستگاه های دسکتاپ و موبایل فعال است. توجه: iOS از ویژگی تمام صفحه پشتیبانی نمی کند. بنابراین کنترل تمام صفحه در دستگاه های iOS قابل مشاهده نیست.
کنترل میانبرهای صفحه کلید فهرستی از میانبرهای صفحه کلید را برای تعامل با نقشه نمایش می دهد.

شما مستقیماً به این کنترل‌های نقشه دسترسی ندارید یا آنها را تغییر نمی‌دهید. در عوض، فیلدهای MapOptions نقشه را تغییر می‌دهید که بر روی دید و نمایش کنترل‌ها تأثیر می‌گذارد. می‌توانید نمایش کنترل را پس از نمونه‌سازی نقشه خود (با MapOptions مناسب) تنظیم کنید یا با فراخوانی setOptions() یک نقشه را به صورت پویا تغییر دهید تا گزینه‌های نقشه را تغییر دهید.

همه این کنترل ها به طور پیش فرض فعال نیستند. برای آشنایی با رفتار رابط کاربری پیش‌فرض (و نحوه اصلاح چنین رفتاری)، به رابط کاربری پیش‌فرض در زیر مراجعه کنید.

رابط کاربری پیش فرض

به طور پیش فرض، اگر نقشه خیلی کوچک باشد (200x200 پیکسل) همه کنترل ها ناپدید می شوند. شما می توانید با تنظیم صریح کنترل برای قابل مشاهده بودن این رفتار را لغو کنید. به افزودن کنترل‌ها به نقشه مراجعه کنید.

رفتار و ظاهر کنترل‌ها در دستگاه‌های تلفن همراه و رومیزی یکسان است، به جز کنترل تمام صفحه (به رفتار شرح داده شده در لیست کنترل‌ها مراجعه کنید).

علاوه بر این، کنترل صفحه کلید به طور پیش فرض در همه دستگاه ها روشن است.

رابط کاربری پیش فرض را غیرفعال کنید

ممکن است بخواهید دکمه های رابط کاربری پیش فرض API را به طور کامل خاموش کنید. برای انجام این کار، ویژگی disableDefaultUI نقشه (در شی MapOptions ) را روی true تنظیم کنید. این ویژگی هر دکمه کنترل رابط کاربری را از Maps JavaScript API غیرفعال می کند. با این حال، حرکات ماوس یا میانبرهای صفحه کلید روی نقشه پایه را که به ترتیب توسط ویژگی‌های gestureHandling و keyboardShortcuts کنترل می‌شوند، تحت تأثیر قرار نمی‌دهد.

کد زیر دکمه های UI را غیرفعال می کند:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

کنترل ها را به نقشه اضافه کنید

ممکن است بخواهید رابط خود را با حذف، افزودن یا اصلاح رفتار یا کنترل‌های UI تنظیم کنید و اطمینان حاصل کنید که به‌روزرسانی‌های آینده این رفتار را تغییر نمی‌دهند. اگر می‌خواهید فقط رفتار موجود را اضافه یا تغییر دهید، باید اطمینان حاصل کنید که کنترل به صراحت به برنامه شما اضافه شده است.

برخی از کنترل‌ها به‌طور پیش‌فرض روی نقشه ظاهر می‌شوند در حالی که برخی دیگر ظاهر نمی‌شوند مگر اینکه شما به‌طور خاص آنها را درخواست کنید. افزودن یا حذف کنترل‌ها از نقشه در فیلدهای شی MapOptions زیر مشخص می‌شود، که برای قابل مشاهده کردن آنها روی true یا برای پنهان کردن آنها روی false تنظیم می‌کنید:

{
  zoomControl: boolean,
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

به طور پیش فرض، اگر نقشه کوچکتر از 200x200 پیکسل باشد، تمام کنترل ها ناپدید می شوند. شما می توانید با تنظیم صریح کنترل برای قابل مشاهده بودن این رفتار را لغو کنید. به عنوان مثال، جدول زیر بر اساس اندازه نقشه و تنظیمات فیلد zoomControl ، نمایان بودن یا نبودن کنترل زوم را نشان می دهد:

اندازه نقشه	`zoomControl`	قابل مشاهده است؟
هر	`false`	خیر
هر	`true`	بله
>= 200x200 پیکسل	`undefined`	بله
<200x200px	`undefined`	خیر

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

گزینه های کنترل

چندین کنترل قابل تنظیم هستند که به شما امکان می دهند رفتار آنها را تغییر دهید یا ظاهر آنها را تغییر دهید. برای مثال، کنترل Map Type ممکن است به عنوان یک نوار افقی یا یک منوی کشویی ظاهر شود.

این کنترل ها با تغییر فیلدهای گزینه های کنترل مناسب در شی MapOptions پس از ایجاد نقشه اصلاح می شوند.

به عنوان مثال، گزینه های تغییر کنترل Map Type در قسمت mapTypeControlOptions نشان داده شده است. کنترل Map Type ممکن است در یکی از گزینه های style زیر ظاهر شود:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR آرایه‌ای از کنترل‌ها را به‌عنوان دکمه‌هایی در یک نوار افقی نمایش می‌دهد که در Google Maps نشان داده شده است.
google.maps.MapTypeControlStyle.DROPDOWN_MENU یک دکمه کنترل را نمایش می دهد که به شما امکان می دهد نوع نقشه را با استفاده از یک منوی کشویی انتخاب کنید.
google.maps.MapTypeControlStyle.DEFAULT رفتار پیش فرض را نشان می دهد که به اندازه صفحه بستگی دارد و ممکن است در نسخه های بعدی API تغییر کند.

توجه داشته باشید که اگر هر یک از گزینه‌های کنترل را تغییر می‌دهید، باید صراحتاً با تنظیم مقدار MapOptions مناسب روی true ، کنترل را نیز فعال کنید. به عنوان مثال، برای تنظیم یک کنترل Map Type برای نمایش سبک DROPDOWN_MENU ، از کد زیر در شی MapOptions استفاده کنید:

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

مثال زیر نحوه تغییر موقعیت و سبک پیش فرض کنترل ها را نشان می دهد.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

کنترل ها معمولاً پس از ایجاد نقشه پیکربندی می شوند. با این حال، می‌توانید با فراخوانی متد setOptions() Map ، ارائه کنترل‌ها را به صورت پویا تغییر دهید و گزینه‌های کنترل جدید را به آن ارسال کنید.

تغییر کنترل ها

هنگامی که نقشه خود را از طریق فیلدهای موجود در شی MapOptions نقشه ایجاد می کنید، ارائه یک کنترل را مشخص می کنید. این فیلدها در زیر مشخص می شوند:

zoomControl کنترل زوم را فعال/غیرفعال می کند. به طور پیش فرض، این کنترل قابل مشاهده است و در نزدیکی سمت راست پایین نقشه ظاهر می شود. فیلد zoomControlOptions همچنین ZoomControlOptions برای استفاده برای این کنترل مشخص می کند.
cameraControl کنترل دوربین را فعال/غیرفعال می کند. این کنترل به طور پیش فرض روی نقشه ها با استفاده از کانال بتا قابل مشاهده است. فیلد cameraControlOptions علاوه بر این، CameraControlOptions برای استفاده برای این کنترل مشخص می کند.
mapTypeControl کنترل Map Type را فعال/غیرفعال می کند که به کاربر امکان می دهد بین انواع نقشه (مانند نقشه و ماهواره) جابجا شود. به طور پیش فرض، این کنترل قابل مشاهده است و در گوشه سمت چپ بالای نقشه ظاهر می شود. فیلد mapTypeControlOptions علاوه بر این MapTypeControlOptions را برای استفاده برای این کنترل مشخص می کند.
streetViewControl کنترل آدمک آدمک را فعال/غیرفعال می‌کند که به کاربر اجازه می‌دهد پانورامای نمای خیابان را فعال کند. به طور پیش فرض، این کنترل قابل مشاهده است و در نزدیکی سمت راست پایین نقشه ظاهر می شود. فیلد streetViewControlOptions علاوه بر این، StreetViewControlOptions را برای استفاده برای این کنترل مشخص می کند.
rotateControl ظاهر کنترل چرخش را برای کنترل جهت تصاویر 45 درجه فعال/غیرفعال می کند. به طور پیش فرض، حضور کنترل با وجود یا عدم وجود تصاویر 45 درجه برای نوع نقشه داده شده در بزرگنمایی و مکان فعلی تعیین می شود. شما می توانید رفتار کنترل را با تنظیم rotateControlOptions نقشه برای تعیین RotateControlOptions برای استفاده تغییر دهید. اگر تصویر 45 درجه در دسترس نباشد، نمی توانید کنترل را ظاهر کنید.
scaleControl کنترل مقیاس را که مقیاس نقشه را ارائه می دهد، فعال/غیرفعال می کند. به طور پیش فرض، این کنترل قابل مشاهده نیست. وقتی فعال باشد، همیشه در گوشه سمت راست پایین نقشه ظاهر می شود. scaleControlOptions علاوه بر این ScaleControlOptions را برای استفاده برای این کنترل مشخص می کند.
fullscreenControl کنترلی را که نقشه را در حالت تمام صفحه باز می کند فعال/غیرفعال می کند. به طور پیش فرض، این کنترل به طور پیش فرض در دستگاه های دسکتاپ و اندروید فعال است. هنگامی که فعال است، کنترل در نزدیکی سمت راست بالای نقشه ظاهر می شود. fullscreenControlOptions همچنین FullscreenControlOptions برای استفاده برای این کنترل مشخص می کند.

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

کنترل موقعیت

اکثر گزینه های کنترل حاوی یک ویژگی position (از نوع ControlPosition ) هستند که نشان می دهد در کجای نقشه باید کنترل قرار گیرد. مکان یابی این کنترل ها مطلق نیست. در عوض، API کنترل‌ها را به‌طور هوشمندانه با جریان دادن آن‌ها در اطراف عناصر نقشه موجود یا سایر کنترل‌ها، در محدودیت‌های داده شده (مانند اندازه نقشه) قرار می‌دهد.

توجه : هیچ تضمینی وجود ندارد که کنترل‌ها ممکن است با توجه به طرح‌بندی‌های پیچیده همپوشانی نداشته باشند، اگرچه API سعی می‌کند آن‌ها را هوشمندانه ترتیب دهد.

موقعیت های کنترل زیر پشتیبانی می شوند:

TOP_CENTER نشان می دهد که کنترل باید در امتداد مرکز بالای نقشه قرار گیرد.
TOP_LEFT نشان می دهد که کنترل باید در امتداد سمت چپ بالای نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز بالا جریان داشته باشد.
TOP_RIGHT نشان می دهد که کنترل باید در امتداد سمت راست بالای نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز بالا جریان داشته باشد.
LEFT_TOP نشان می‌دهد که کنترل باید در سمت چپ بالای نقشه، اما در زیر هر عنصر TOP_LEFT قرار گیرد.
RIGHT_TOP نشان می‌دهد که کنترل باید در سمت راست بالای نقشه، اما در زیر هر عنصر TOP_RIGHT قرار گیرد.
LEFT_CENTER نشان می دهد که کنترل باید در امتداد سمت چپ نقشه، در مرکز بین موقعیت های TOP_LEFT و BOTTOM_LEFT قرار گیرد.
RIGHT_CENTER نشان می‌دهد که کنترل باید در سمت راست نقشه، در مرکز بین موقعیت‌های TOP_RIGHT و BOTTOM_RIGHT قرار گیرد.
LEFT_BOTTOM نشان می دهد که کنترل باید در امتداد پایین سمت چپ نقشه، اما بالای هر عنصر BOTTOM_LEFT قرار گیرد.
RIGHT_BOTTOM نشان می دهد که کنترل باید در امتداد سمت راست پایین نقشه، اما بالای هر عنصر BOTTOM_RIGHT قرار گیرد.
BOTTOM_CENTER نشان می دهد که کنترل باید در امتداد مرکز پایین نقشه قرار گیرد.
BOTTOM_LEFT نشان می‌دهد که کنترل باید در امتداد پایین سمت چپ نقشه قرار گیرد، و هر عنصر فرعی کنترل به سمت مرکز پایین جریان داشته باشد.
BOTTOM_RIGHT نشان می‌دهد که کنترل باید در امتداد سمت راست پایین نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز پایین جریان داشته باشد.

توجه داشته باشید که این موقعیت‌ها ممکن است با موقعیت‌های عناصر UI که ممکن است مکان‌های آنها را تغییر ندهید (مانند حق نسخه‌برداری و نشان‌واره Google) مطابقت داشته باشد. در این موارد، کنترل‌ها بر اساس منطق ذکر شده برای هر موقعیت جریان می‌یابند و تا حد امکان نزدیک به موقعیت مشخص شده خود ظاهر می‌شوند.

مثال زیر یک نقشه ساده را با تمام کنترل‌ها در موقعیت‌های مختلف نشان می‌دهد.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

کنترل های سفارشی

علاوه بر تغییر سبک و موقعیت کنترل‌های API موجود، می‌توانید کنترل‌های خود را برای مدیریت تعامل با کاربر ایجاد کنید. کنترل‌ها ویجت‌های ثابتی هستند که بر روی نقشه در موقعیت‌های مطلق شناور می‌شوند، برخلاف پوشش‌هایی که با نقشه زیرین حرکت می‌کنند. اساساً، یک کنترل یک عنصر <div> است که یک موقعیت مطلق بر روی نقشه دارد، مقداری رابط کاربری را به کاربر نمایش می‌دهد و تعامل با کاربر یا نقشه را معمولاً از طریق یک کنترل کننده رویداد انجام می‌دهد.

برای ایجاد کنترل سفارشی خود، قوانین کمی لازم است. با این حال، دستورالعمل های زیر می تواند به عنوان بهترین عمل عمل کند:

CSS مناسب را برای نمایش عنصر(های) کنترل تعریف کنید.
تعامل با کاربر یا نقشه را از طریق کنترل‌کننده‌های رویداد برای تغییرات ویژگی نقشه یا رویدادهای کاربر (مثلاً رویدادهای 'click' ) انجام دهید.
یک عنصر <div> برای نگه داشتن کنترل ایجاد کنید و این عنصر را به ویژگی controls Map اضافه کنید.

در زیر به هر یک از این نگرانی ها پرداخته شده است.

ترسیم کنترل های سفارشی

اینکه چگونه کنترل خود را به دست می آورید به شما بستگی دارد. به طور کلی، توصیه می کنیم تمام نمایش کنترل خود را در یک عنصر <div> قرار دهید تا بتوانید کنترل خود را به عنوان یک واحد دستکاری کنید. ما از این الگوی طراحی در نمونه های زیر استفاده خواهیم کرد.

طراحی کنترل های جذاب نیاز به دانشی در مورد ساختار CSS و DOM دارد. کد زیر تابعی را برای ایجاد یک عنصر دکمه ای نشان می دهد که نقشه را در مرکز شیکاگو می چرخاند.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

مدیریت رویدادها از کنترل های سفارشی

برای اینکه یک کنترل مفید باشد، در واقع باید کاری انجام دهد. آنچه که کنترل انجام می دهد به شما بستگی دارد. کنترل ممکن است به ورودی کاربر پاسخ دهد، یا ممکن است به تغییرات در وضعیت Map پاسخ دهد.

برای پاسخ دادن به ورودی کاربر، از addEventListener() استفاده کنید که رویدادهای DOM پشتیبانی شده را مدیریت می کند. قطعه کد زیر یک شنونده برای رویداد 'click' مرورگر اضافه می کند. توجه داشته باشید که این رویداد از DOM دریافت می شود نه از نقشه.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

ایجاد کنترل های سفارشی در دسترس

برای اطمینان از اینکه کنترل‌ها رویدادهای صفحه‌کلید را دریافت می‌کنند و به درستی در صفحه‌خوان‌ها ظاهر می‌شوند:

همیشه از عناصر بومی HTML برای دکمه ها، عناصر فرم و برچسب ها استفاده کنید. فقط از یک عنصر DIV به عنوان یک کانتینر برای نگهداری کنترل های بومی استفاده کنید. هرگز از یک DIV به عنوان یک عنصر رابط کاربری تعاملی استفاده نکنید.
در صورت لزوم از عنصر label ، ویژگی title یا ویژگی aria-label برای ارائه اطلاعات در مورد یک عنصر UI استفاده کنید.

تعیین موقعیت کنترل های سفارشی

کنترل‌های سفارشی با قرار دادن آنها در موقعیت‌های مناسب در ویژگی controls شی Map ، روی نقشه قرار می‌گیرند. این ویژگی شامل آرایه ای از google.maps.ControlPosition s است. با اضافه کردن Node (معمولاً <div> ) به یک ControlPosition مناسب، یک کنترل سفارشی به نقشه اضافه می‌کنید. (برای کسب اطلاعات در مورد این موقعیت ها، به موقعیت یابی کنترل در بالا مراجعه کنید.)

هر ControlPosition یک MVCArray از کنترل های نمایش داده شده در آن موقعیت را ذخیره می کند. در نتیجه، هنگامی که کنترل‌ها از موقعیت اضافه یا حذف می‌شوند، API کنترل‌ها را متناسب با آن به‌روزرسانی می‌کند.

API کنترل ها را در هر موقعیت به ترتیب یک ویژگی index قرار می دهد. ابتدا کنترل هایی با شاخص کمتر قرار می گیرند. به عنوان مثال، دو کنترل سفارشی در موقعیت BOTTOM_RIGHT مطابق با این ترتیب شاخص تنظیم می‌شوند و مقادیر شاخص پایین‌تر اولویت دارند. به طور پیش فرض، تمام کنترل های سفارشی پس از قرار دادن هر کنترل پیش فرض API قرار می گیرند. شما می توانید این رفتار را با تنظیم ویژگی index کنترل به عنوان یک مقدار منفی لغو کنید. کنترل های سفارشی را نمی توان در سمت چپ لوگو یا سمت راست حق چاپ قرار داد.

کد زیر یک کنترل سفارشی جدید ایجاد می کند (سازنده آن نشان داده نمی شود) و آن را در موقعیت TOP_RIGHT به نقشه اضافه می کند.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

یک نمونه کنترل سفارشی

کنترل زیر ساده است (اگرچه مفید نیست) و الگوهای نشان داده شده در بالا را ترکیب می کند. این کنترل با قرار دادن نقشه در یک مکان پیش‌فرض خاص به رویدادهای 'click' DOM پاسخ می‌دهد:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

اضافه کردن حالت به کنترل ها

کنترل ها همچنین ممکن است وضعیت را ذخیره کنند. مثال زیر شبیه به آنچه قبلا نشان داده شده است، است، اما کنترل حاوی یک دکمه "تنظیم صفحه اصلی" اضافی است که کنترل را برای نمایش یک مکان خانه جدید تنظیم می کند. ما این کار را با ایجاد یک ویژگی home_ در داخل کنترل انجام می‌دهیم تا این حالت را ذخیره کنیم و دریافت‌کننده‌ها و تنظیم‌کننده‌ها را برای آن حالت فراهم کنیم.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

جاوا اسکریپت

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell