نشانگرها (قدیمی)

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

مقدمه

نشانگر مکانی را روی نقشه مشخص می‌کند. به‌طور پیش‌فرض، نشانگر از تصویر استاندارد استفاده می‌کند. نشانگرها می‌توانند تصاویر سفارشی را نمایش دهند، که در این صورت معمولاً به آن‌ها «نماد» گفته می‌شود. نشانگرها و نمادها اشیایی از نوع Marker هستند. می‌توانید نماد سفارشی را در سازنده نشانگر یا با فراخوانی setIcon() در نشانگر تنظیم کنید. درباره سفارشی‌سازی تصویر نشانگر بیشتر بدانید.

به‌طور کلی، نشانگرها نوعی رونهاد هستند. برای اطلاعات درباره انواع دیگر رونهاد، به کشیدن روی نقشه مراجعه کنید.

نشانگرها به‌گونه‌ای طراحی شده‌اند که تعاملی باشند. برای مثال، به‌طور پیش‌فرض، 'click' رویداد دریافت می‌کنند، بنابراین می‌توانید شنونده رویدادی اضافه کنید تا پنجره اطلاعات با نمایش اطلاعات سفارشی باز شود. با تنظیم ویژگی draggable نشانگر روی true، می‌توانید به کاربران اجازه دهید نشانگر را روی نقشه جابه‌جا کنند. برای اطلاعات بیشتر درباره نشانگرهای کشیدنی، زیر را ببینید.

نشانگر اضافه کنید

سازنده google.maps.Marker یک راستین‌نماد شیء Marker options واحد را می‌گیرد و ویژگی‌های اولیه نشانگر را مشخص می‌کند.

فیلدهای زیر به‌ویژه مهم هستند و معمولاً هنگام ساختن نشانگر تنظیم می‌شوند:

  • position (الزامی) یک LatLng مشخص‌کننده مکان اولیه نشانگر را مشخص می‌کند. یکی از راه‌های بازیابی LatLng استفاده از سرویس زمین‌کدیابی است.
  • map (اختیاری) Map را که نشانگر باید روی آن قرار گیرد مشخص می‌کند. اگر نقشه را در ساخت نشانگر مشخص نکنید، نشانگر ایجاد می‌شود اما به نقشه متصل نمی‌شود (یا روی آن نمایش داده نمی‌شود). می‌توانید نشانگر را بعداً با فراخوانی روش setMap() نشانگر اضافه کنید.

مثال زیر یک نشانگر ساده را به نقشه‌ای در اولورو، در مرکز استرالیا، اضافه می‌کند:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

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

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;
مشاهده نمونه

در مثال بالا، نشانگر در نقشه در محل ساخت‌وساز نشانگر بااستفاده از دارایی map در گزینه‌های نشانگر قرار داده شده است. یا می‌توانید بااستفاده از روش setMap() نشانگر، همان‌طور که در مثال زیر نشان داده شده است، نشانگر را مستقیماً به نقشه اضافه کنید: 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

title نشانگر به‌عنوان نکته‌ابزار ظاهر خواهد شد.

اگر نمی‌خواهید هیچ Marker options را در سازنده نشانگر بگذرانید، به‌جای آن، یک شیء خالی {} را در آخرین آرگومان سازنده بگذرانید.

مشاهده نمونه

برداشتن نشانگر

برای برداشتن نشانگر از نقشه، متد setMap() را با گذراندن null به‌عنوان آرگومان فراخوانی کنید. 

marker.setMap(null);

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

اگر می‌خواهید مجموعه‌ای از نشانگرها را مدیریت کنید، باید آرایه‌ای برای نگهداری نشانگرها ایجاد کنید. بااستفاده از این آرایه، می‌توانید setMap() را روی هر نشانگر در آرایه به‌نوبت فراخوانی کنید، هرگاه نیاز به برداشتن نشانگرها داشتید. می‌توانید نشانگرها را با برداشتن آن‌ها از نقشه و سپس تنظیم آرایه length روی 0 حذف کنید، که همه ارجاع‌های مربوط به نشانگرها را برمی‌دارد.

مشاهده مثال

سفارشی‌سازی کردن تصویر نشانگر

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

نشانگرها با نمادهای تصویری

در ابتدایی‌ترین حالت، یک نماد می‌تواند تصویری را برای استفاده به‌جای نماد پین پیش‌فرض Google Maps مشخص کند. برای مشخص کردن چنین نمادی، ویژگی icon نشانگر را روی نشانی وب تصویر تنظیم کنید. ‫Maps JavaScript API اندازه نماد را به‌طور خودکار تنظیم می‌کند.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

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

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;
مشاهده نمونه

نشانگرها با نمادهای برداری

می‌توانید از مسیرهای برداری SVG سفارشی برای تعریف ظاهر دیداری نشانگرها استفاده کنید. برای انجام این کار، یک مقدار ثابت Symbol را با مسیر موردنظر به دارایی icon علامت‌گذاری منتقل کنید. می‌توانید بااستفاده از نشان‌گذاری مسیر SVG، مسیر سفارشی تعریف کنید یا از یکی از مسیرهای ازپیش تعریف‌شده در google.maps.SymbolPath استفاده کنید. دارایی anchor برای اینکه نشانگر هنگام تغییر سطح بزرگ‌نمایی به‌درستی پرداز شود الزامی است. درباره استفاده از «نمادها» برای ایجاد نمادهای برداری برای نشانگرها (و چندخطی‌ها) بیشتر بدانید.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
مشاهده نمونه

برچسب‌های نشانگر

برچسب نشانگر حرف یا عددی است که داخل نشانگر نشان داده می‌شود. تصویر نشانگر در این بخش برچسب نشانگری را با حرف «B» روی آن نمایش می‌دهد. می‌توانید برچسب نشانگر را به‌صورت رشته یا شیء MarkerLabel که شامل رشته و دیگر ویژگی‌های برچسب است مشخص کنید.

هنگام ایجاد یک نشانگر، می‌توانید یک ویژگی label را در شیء MarkerOptions مشخص کنید. یا می‌توانید باsetLabel() نشانگر تماس بگیرید تا برچسب را روی نشانگر موجود تنظیم کنید.

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

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

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

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;
مشاهده مثال

نمادهای پیچیده

می‌توانید شکل‌های پیچیده‌ای را برای نشان دادن منطقه‌های قابل‌کلیک مشخص کنید و مشخص کنید که نمادها چگونه باید نسبت به هم‌پوشانی‌های دیگر ظاهر شوند («ترتیب پشته» آن‌ها). نمادهای مشخص‌شده به این روش باید icon دارایی‌هایشان را روی شیء نوع Icon تنظیم کنند.

Icon شیء تصویر را تعریف می‌کند. آن‌ها همچنین size نماد، origin نماد (اگر تصویر موردنظر شما بخشی از تصویر بزرگ‌تری در یک اسپرایت باشد، برای مثال)، و anchor را که نقطه داغ نماد باید در آن قرار گیرد (که براساس مبدأ است) تعریف می‌کنند.

اگر از برچسب با نشانگر سفارشی استفاده می‌کنید، می‌توانید برچسب را با دارایی labelOrigin در شیء Icon مکان‌یابی کنید.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

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

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;
مشاهده مثال

درحال تبدیل MarkerImage شیء به نوع Icon

تا نسخه ۳.۱۰ «میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps»، نمادهای پیچیده به‌صورت MarkerImage شیء تعریف می‌شدند. حرفی Icon شیء در نسخه ۳.۱۰ اضافه شد و از نسخه ۳.۱۱ به‌بعد جایگزین MarkerImage می‌شود. راستین‌نمادهای شیء Icon از همان پارامترهای MarkerImage پشتیبانی می‌کنند، که به شما امکان می‌دهد به‌راحتی با برداشتن سازنده، پیچیدن پارامترهای قبلی در {}، و افزودن نام هر پارامتر، MarkerImage را به Icon تبدیل کنید. برای مثال: 

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

مساوی

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

بهینه‌سازی نشانگرها

بهینه‌سازی با پرداز کردن چندین نشانگر به‌عنوان یک عنصر ایستا، عملکرد را بهبود می‌بخشد. این ویژگی در مواردی که تعداد زیادی نشانگر لازم است مفید است. به‌طور پیش‌فرض، Maps JavaScript API تصمیم می‌گیرد که آیا نشانگر بهینه‌سازی شود یا نه. وقتی تعداد زیادی نشانگر وجود داشته باشد، Maps JavaScript API تلاش می‌کند نشانگرها را با بهینه‌سازی ارائه دهد. همه «نشانگرها» را نمی‌توان بهینه‌سازی کرد؛ در برخی شرایط، Maps JavaScript API ممکن است لازم باشد «نشانگرها» را بدون بهینه‌سازی ارائه کند. وقتی هر نشانگر باید به‌عنوان عنصر DOM جداگانه‌ای رندر شود، یا برای GIF یا PNG پویانمایی‌شده، رندر کردن بهینه‌شده را غیرفعال کنید. مثال زیر نحوه ایجاد نشانگر بهینه‌سازی‌شده را نشان می‌دهد: 

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

نشانگر را دردسترس قرار دهید

با افزودن رویداد شنونده کلیک و تنظیم optimized روی false، می‌توانید نشانگر را دردسترس قرار دهید. شنونده کلیک باعث می‌شود نشانگر معنای دکمه داشته باشد، که می‌توان بااستفاده از پیمایش صفحه‌کلید، صفحه‌خوان‌ها، و غیره به آن دسترسی پیدا کرد. از گزینه title برای ارائه نوشتار دسترس‌پذیر برای نشانگر استفاده کنید.

در مثال زیر، وقتی کلید جهش فشار داده می‌شود، اولین نشانگر تمرکز را دریافت می‌کند؛ سپس می‌توانید از کلیدهای جهت‌نما برای حرکت بین نشانگرها استفاده کنید. برای ادامه حرکت در بقیه کنترل‌های نقشه، دوباره روی کلید جهش فشار دهید. اگر نشانگر پنجره اطلاعات داشته باشد، می‌توانید آن را با کلیک کردن روی نشانگر یا با فشار دادن کلید Enter یا کلید فاصله وقتی نشانگر انتخاب شده است باز کنید. وقتی پنجره اطلاعات بسته می‌شود، تمرکز به نشانگر مربوطه برمی‌گردد.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

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

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;
مشاهده مثال

پویاسازی نشانگر

می‌توانید نشانگرها را پویانمایی کنید تا در شرایط مختلف، حرکت پویا از خود نشان دهند. برای مشخص کردن روش پویانمایی یک نشانگر، از دارایی animation نشانگر، از نوع google.maps.Animation استفاده کنید. مقادیر زیر Animation پشتیبانی می‌شوند:

  • DROP نشان می‌دهد که نشانگر باید از بالای نقشه به مکان نهایی‌اش در نقشه رها شود. وقتی نشانگر متوقف شود، پویانمایی متوقف می‌شود و animation به null برمی‌گردد. این نوع پویانمایی معمولاً درطول ایجاد Marker مشخص می‌شود.
  • BOUNCE نشان می‌دهد که نشانگر باید در محل بالا و پایین بپرد. نشانگر جهنده تا زمانی که ویژگی animation آن صریحاً روی null تنظیم نشود، به جهیدن ادامه خواهد داد.

می‌توانید با فراخوانی setAnimation() در شیء Marker، پویانمایی را در نشانی موجودی شروع کنید.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;
مشاهده نمونه

اگر نشانگرهای زیادی دارید، شاید نخواهید همه آن‌ها را هم‌زمان روی نقشه قرار دهید. می‌توانید از setTimeout() برای فاصله دادن بین پویانمایی‌های نشانگرهایتان بااستفاده از الگویی مانند الگوی نشان‌داده‌شده در زیر استفاده کنید: 

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

مشاهده نمونه

کشیدنی کردن نشانگر

برای اینکه به کاربران اجازه دهید نشانگر را به مکان دیگری روی نقشه بکشند، draggable را در گزینه‌های نشانگر روی true تنظیم کنید. 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

سفارشی‌سازی بیشتر نشانگر

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