إشعار: ستتوفّر قريبًا ميزة جديدة لتصميم الخرائط الأساسية في "منصة خرائط Google". يتضمّن هذا التعديل على تصميم الخريطة لوحة ألوان تلقائية جديدة وعلامات جديدة وتحسينات على تجارب الخريطة وسهولة استخدامها. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. لمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل هذا النمط في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد لمنصّة "خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

العلامات (القديمة)

اختيار النظام الأساسي: 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

في المثال أعلاه، يتم وضع العلامة على الخريطة عند إنشاء العلامة باستخدام السمة map في خيارات العلامة. بدلاً من ذلك، يمكنك إضافة العلامة إلى الخريطة مباشرةً باستخدام setMap() method للعلامة، كما هو موضّح في المثال أدناه:

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". يمكنك إضافة نص يحتوي على تصنيف علامة، واستخدام رموز معقدة لتحديد المناطق التي يمكن النقر عليها، وضبط ترتيب تجميع العلامات.

العلامات التي تحتوي على رموز صور

في أبسط الحالات، يمكن أن يحدِّد الرمز صورة لاستخدامها بدلاً من الرمز التلقائي للخارطة الدبوسية في "خرائط Google". لتحديد رمز مماثل، اضبط سمة icon للعلامة على عنوان URL لصورة. ستضبط واجهة برمجة التطبيقات 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

العلامات التي تتضمّن رموزًا مستندة إلى المتجهات

يمكنك استخدام مسارات متّجهات 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

تصنيفات العناصر المميزة

تصنيف العلامة هو حرف أو رقم يظهر داخل العلامة. تعرض صورة العلامة في هذا القسم تصنيف علامة يتضمّن الحرف "ب" . يمكنك تحديد تصنيف العلامة على أنّه سلسلة أو كائن MarkerLabel يتضمّن سلسلة وسمات تصنيف أخرى.

عند إنشاء علامة، يمكنك تحديد سمة label في العنصر MarkerOptions. بدلاً من ذلك، يمكنك استدعاء setLabel() على عنصر Marker لضبط التصنيف على علامة حالية.

يعرض المثال التالي العلامات المُصنَّفة عندما ينقر المستخدم على الخريطة:

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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

الرموز المعقّدة

يمكنك تحديد أشكال معقّدة للإشارة إلى المناطق التي يمكن النقر عليها، وتحديد كيفية ظهور الرموز بالنسبة إلى الصور المتراكبة الأخرى (أي "ترتيب التراكب"). يجب أن تضبط الرموز المحدّدة بهذه الطريقة سمات 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

تحويل عناصر `MarkerImage` إلى النوع `Icon`

حتى الإصدار 3.10 من واجهة برمجة التطبيقات Maps JavaScript API، كانت الرموز المعقدة يتم تعريفها على أنّها عناصر MarkerImage. تمت إضافة العنصر الثابت Icon في الإصدار 3.10، ويحلّ محل العنصر الثابت MarkerImage من الإصدار 3.11 فصاعدًا. تتيح لك القيم الثابتة للكائن 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)
};

تحسين العلامات

يُحسِّن التحسين الأداء من خلال عرض العديد من العلامات كعنصر static واحد. ويُعدّ ذلك مفيدًا في الحالات التي يلزم فيها استخدام عددٍ كبير من العلامات. ستتّخذ واجهة برمجة التطبيقات Maps JavaScript API قرارًا تلقائيًا بشأن ما إذا كان سيتم تحسين علامة. عند توفّر عدد كبير من علامات ، ستحاول واجهة برمجة التطبيقات Maps JavaScript API عرض علامات مع تحسينها. لا يمكن تحسين جميع العلامات، ففي بعض الحالات، قد تحتاج واجهة برمجة التطبيقات JavaScript لـ "خرائط Google" إلى عرض علامات بدون تحسين. أوقِف العرض المحسَّن لملفات GIF أو PNG المتحرّكة، أو عندما يجب عرض كل علامة كعنصر DOM منفصل. يوضّح المثال التالي إنشاء علامة محسّنة:

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

تسهيل الوصول إلى علامة

يمكنك إتاحة الوصول إلى علامة من خلال إضافة حدث مستمع للنقر، و ضبط optimized على false. يؤدي مستمع النقرات إلى منح العلامة دلالات الزر، والتي يمكن الوصول إليها باستخدام التنقّل باستخدام لوحة المفاتيح وبرامج قراءة الشاشة وما إلى ذلك. استخدِم الخيار title لعرض نص سهل الاستخدام لعلامة.

في المثال التالي، يتلقّى العلامة الأولى التركيز عند الضغط على مفتاح Tab ، ويمكنك بعد ذلك استخدام مفاتيح الأسهم للتنقّل بين العلامات. اضغط على مفتاح التبويب مرة أخرى لمواصلة التنقّل في بقية عناصر التحكّم في الخريطة. إذا كانت إحدى العلامات تحتوي على نافذة معلومات، يمكنك فتحها بالنقر على العلامة أو بالضغط على مفتاح 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

إضافة تأثيرات حركية إلى علامة

يمكنك إضافة مؤثرات متحركة إلى العلامات لكي تعرِض حركة ديناميكية في مجموعة متنوعة من الظروف المختلفة. لتحديد طريقة عرض العلامة المتحركة، استخدِم سمة 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;index.ts

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;index.js

عرض مثال

تجربة عيّنة

JSFiddle.net Google Cloud Shell

إذا كان لديك العديد من العلامات، قد لا تريد إسقاطها على الخريطة كلّه مرة واحدة. يمكنك استخدام 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!"
});

مزيد من تخصيص العلامات

للحصول على علامة مخصّصة بالكامل، اطّلِع على مثال النافذة المنبثقة المخصّصة.

لمزيد من الإضافات لفئة "العلامة" وتجميع العلامات وإدارتها وتخصيص التراكب، يُرجى الاطّلاع على مكتبات المصدر المفتوح.

العلامات (القديمة)

مقدمة

إضافة علامة

TypeScript

JavaScript

تجربة عيّنة

إزالة علامة

تخصيص صورة علامة

العلامات التي تحتوي على رموز صور

TypeScript

JavaScript

تجربة عيّنة

العلامات التي تتضمّن رموزًا مستندة إلى المتجهات

TypeScript

JavaScript

تجربة عيّنة

تصنيفات العناصر المميزة

TypeScript

JavaScript

تجربة عيّنة

الرموز المعقّدة

TypeScript

JavaScript

تجربة عيّنة

تحويل عناصر MarkerImage إلى النوع Icon

تحسين العلامات

تسهيل الوصول إلى علامة

TypeScript

JavaScript

تجربة عيّنة

إضافة تأثيرات حركية إلى علامة

TypeScript

JavaScript

تجربة عيّنة

جعل العلامة قابلة للسحب

مزيد من تخصيص العلامات

تحويل عناصر `MarkerImage` إلى النوع `Icon`