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

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

מבוא

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

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

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

הוסף סמן

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

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

  • position (חובה) מציין LatLng שמזהה את המיקום הראשוני של הסמן. אחת מהדרכים לאחזר את הערך של LatLng היא באמצעות שירות המיפוי.
  • map (אופציונלי) מציין את Map שבו רוצים למקם את הסמן. אם לא מציינים את המפה בזמן יצירת הסמן, הסמן נוצר אבל לא מצורף למפה (או מוצג בה). אפשר להוסיף את הסמן מאוחר יותר על ידי קריאה לשיטה setMap() של הסמן.

בדוגמה הבאה מוסף סמן פשוט למפה ב-Uluru, במרכז אוסטרליה:

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 כלשהו ב-constructor של הסמן, תוכלו להעביר במקום זאת אובייקט {} ריק בארגומנט האחרון של ה-constructor.

להצגת דוגמה

הסרת סמן

כדי להסיר סמן מהמפה, צריך לבצע קריאה ל-method‏ setMap() ולהעביר את הערך null כארגומנטים.

marker.setMap(null);

חשוב לזכור שהשיטה שלמעלה לא מוחקת את הסמן. הסימון במפה יוסר. אם רוצים למחוק את הסמן במקום זאת, צריך להסיר אותו מהמפה ואז להגדיר את הסמן עצמו לערך null.

אם רוצים לנהל קבוצה של סמנים, צריך ליצור מערך שיאחסן את הסמנים. באמצעות המערך הזה, תוכלו לקרוא לפונקציה setMap() על כל סמן במערך בתורו כשתרצו להסיר את הסימנים. כדי למחוק את הסמנים, מסירים אותם מהמפה ומגדירים את length של המערך לערך 0, וכך מסירים את כל ההפניות לסמנים.

להצגת דוגמה

התאמה אישית של תמונת סמן

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

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

במקרה הבסיסי ביותר, סמל יכול לציין תמונה שתשמש במקום סמל הסיכה שמוגדרת כברירת מחדל במפות Google. כדי לציין סמל כזה, מגדירים את המאפיין icon של הסמן לכתובת ה-URL של תמונה. ממשק API של JavaScript במפות Google יקבע את גודל הסמל באופן אוטומטי.

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 כדי להגדיר את המראה החזותי של התוויות. כדי לעשות זאת, מעבירים ל-method אובייקט 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;
להצגת דוגמה

ניסיון של דוגמה

תוויות של סמנים

תווית של סמן היא אות או מספר שמופיעים בתוך הסמן. בתמונה של הסמן בקטע הזה מוצגת תווית של סמן עם האות 'ב'. אפשר לציין תווית של סמן כמחרוזת או כאובייקט 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 של הסמל (אם התמונה הרצויה היא חלק מתמונה גדולה יותר ב-sprite, למשל) ואת 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 של JavaScript במפות Google יקבע אם תתבצע אופטימיזציה של סמן. כשיש מספר גדול של סמנים, ממשק ה-API של JavaScript במפות Google ינסה להציג את הסמנים בצורה אופטימלית. לא ניתן לבצע אופטימיזציה לכל הסמנים. במקרים מסוימים, יכול להיות שממשק ה-API של JavaScript במפות Google יצטרך ליצור סמנים ללא אופטימיזציה. משביתים את העיבוד המותאם לתמונות GIF או PNG מונפשות, או כשצריך להציג כל סמן כרכיב DOM נפרד. בדוגמה הבאה מוצגת יצירת סמן מותאם:

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

איך מגדירים סמן כנגישה

כדי להפוך סמן לנגיש, מוסיפים אירוע של מאזין קליקים ומגדירים את optimized לערך false. רכיב ההקשה מאפשר לסמן את הסמן כלחצן, כך שאפשר לגשת אליו באמצעות ניווט במקלדת, קוראי מסך וכו'. משתמשים באפשרות 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 מציין שהסמן צריך להתנדנד במקום. סמן הקפיצה ימשיך לקפוץ עד שהנכס 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!"
});

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

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

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