סמנים (דור קודם)

בחירת פלטפורמה: Android iOS JavaScript

מבוא

סמן מציין מיקום במפה. כברירת מחדל, סמן משתמש בתמונה רגילה. סמנים יכולים להציג תמונות בהתאמה אישית, ובמקרה כזה הם בדרך כלל נקראים "סמלים". סמנים וסמלים הם אובייקטים מסוג Marker. אפשר להגדיר סמל בהתאמה אישית ב-constructor של הסמן, או על ידי קריאה ל-setIcon() בסמן. מידע נוסף על התאמה אישית של תמונת הסמן

באופן כללי, סמנים הם סוג של שכבת-על. למידע על סוגים אחרים של שכבות-על, אפשר לעיין במאמר בנושא ציור במפה.

הסמנים נועדו להיות אינטראקטיביים. לדוגמה, כברירת מחדל הם מקבלים אירועי 'click', כך שאפשר להוסיף רכיב event listener כדי להציג חלון מידע עם מידע בהתאמה אישית. אתם יכולים לאפשר למשתמשים להזיז סמן במפה על ידי הגדרת המאפיין draggable של הסמן לערך true. מידע נוסף על סמנים שניתן לגרור מופיע בהמשך.

הוסף סמן

הפונקציה google.maps.Marker constructor מקבלת אובייקט Marker options אחד literal, שמציין את המאפיינים הראשוניים של הסמן.

השדות הבאים חשובים במיוחד, ובדרך כלל מגדירים אותם כשיוצרים סמן:

  • ‫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. אתם יכולים להוסיף טקסט באמצעות תווית סמן, להשתמש בסמלים מורכבים כדי להגדיר אזורים שניתן ללחוץ עליהם ולהגדיר את סדר הערימה של הסמנים.

סמני מיקום עם סמלי תמונות

במקרה הכי פשוט, סמל יכול לציין תמונה שתשמש במקום סמל הנעיץ שמוגדר כברירת מחדל במפות 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;

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() באובייקט 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;

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

עד גרסה 3.10 של Maps JavaScript API, סמלים מורכבים הוגדרו כאובייקטים מסוג MarkerImage. ‫ הליטרל של האובייקט Icon נוסף בגרסה 3.10, והוא מחליף את MarkerImage החל מגרסה 3.11. ‫Icon ליטרלים של אובייקט תומכים באותם פרמטרים כמו MarkerImage, כך שאפשר להמיר בקלות MarkerImage ל-Icon על ידי הסרת ה-constructor, הוספת סוגריים מסוג {} לפרמטרים הקודמים והוספת השמות של כל פרמטר. לדוגמה: 

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)
};

אופטימיזציה של סמנים

האופטימיזציה משפרת את הביצועים על ידי עיבוד של הרבה סמנים כרכיב סטטי יחיד. האפשרות הזו שימושית במקרים שבהם נדרש מספר גדול של סמנים. כברירת מחדל, ממשק ה-API של מפות Google ל-JavaScript יקבע אם תתבצע אופטימיזציה של סמן. כשיש מספר גדול של סמנים, Maps JavaScript API ינסה לרנדר את הסמנים באמצעות אופטימיזציה. לא את כל הסמנים אפשר לשפר. במצבים מסוימים, יכול להיות ש-Maps JavaScript API יצטרך לעבד סמנים בלי לבצע אופטימיזציה. משביתים את העיבוד האופטימלי של קובצי GIF או PNG עם אנימציה, או כשצריך לעבד כל סמן כרכיב DOM נפרד. בדוגמה הבאה מוצגת יצירה של סמן אופטימלי: 

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

איך להפוך סמן לנגיש

כדי להפוך סמן לנגיש, מוסיפים אירוע רכיב click listener ומגדירים את optimized ל-false. רכיב ה-click listener גורם לסמן לקבל סמנטיקה של לחצן, שאפשר לגשת אליה באמצעות ניווט במקלדת, קוראי מסך וכו'. משתמשים באפשרות title כדי להציג טקסט נגיש לסמן.

בדוגמה הבאה, הסמן הראשון מקבל את המיקוד כשלוחצים על Tab. לאחר מכן אפשר להשתמש במקשי החיצים כדי לעבור בין הסמנים. לוחצים שוב על 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;

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 מציין שהסמן צריך לקפוץ במקום. A סמן קופץ ימשיך לקפוץ עד שהמאפיין 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!"
});

התאמה אישית נוספת של סמנים

למידע נוסף על הרחבות של מחלקת הסמנים, על ניהול ואשכול סמנים ועל התאמה אישית של שכבות-על, אפשר לעיין בספריות קוד פתוח.