מעבר לסימונים מתקדמים

החל מ-21 בפברואר 2024 (גרסה 3.56), ה-API google.maps.Marker הוצא משימוש. מומלץ לעבור לכיתה החדשה google.maps.marker.AdvancedMarkerElement. סמנים מתקדמים מספקים שיפורים משמעותיים בהשוואה לכיתה google.maps.Marker מהדור הקודם.

מידע נוסף על ההוצאה משימוש

כדי לעדכן סמן מדור קודם לסמן מתקדם, מבצעים את השלבים הבאים:

1. מוסיפים קוד כדי לייבא את ספריית הסמנים. חשוב לזכור שהדרישה הזו לא חלה על הגרסה הקודמת של הסמנים (google.maps.Marker).
2. שינוי google.maps.Marker ל-google.maps.marker.AdvancedMarkerElement
3. מוסיפים מזהה מפה לקוד האימות של המפה. לדוגמה, mapId: 'DEMO_MAP_ID' למטרות בדיקה אם עדיין אין לכם מזהה מפה.

הוספת ספריית הסמנים המתקדמים

השיטה שבה משתמשים לטעינת ספריות תלויה באופן שבו דף האינטרנט טוען את Maps JavaScript API.

• אם בדף האינטרנט שלכם נעשה שימוש בחיוב דינמי של סקריפטים, צריך להוסיף את ספריית הסמנים ולייבא את AdvancedMarkerElement (ואת PinElement, אם רוצים) במהלך זמן הריצה, כפי שמתואר כאן.

  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

• אם בדף האינטרנט שלכם נעשה שימוש בתג הטעינה הקודם של הסקריפט הישיר, צריך להוסיף את הערך libraries=marker לסקריפט הטעינה, כפי שמתואר בקטע הקוד הבא.

  <script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
  defer
  ></script>

מידע נוסף על טעינת Maps JavaScript API

דוגמאות

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

לפני ההעברה

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

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

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

אחרי ההעברה

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

תכונות מתקדמות של סמנים

אפשר להתאים אישית סמנים מתקדמים בדרכים שלא היו אפשריות בעבר. עכשיו אפשר לשנות את הגודל (הסולם) של הסמנים ולשנות את הצבעים של הרקע, המסגרת והסמל. קל יותר לעבוד עם תמונות גרפיות בהתאמה אישית, ועכשיו אפשר ליצור סמנים בהתאמה אישית באמצעות HTML ו-CSS. מידע נוסף על כל מה שאפשר לעשות עם סמנים מתקדמים:

• התאמה אישית בסיסית של סמנים
• יצירת סמנים עם גרפיקה
• יצירת סמנים באמצעות HTML ו-CSS
• שליטה בהתנהגות במהלך התנגשות, בגובה ובמידת הניראות
• איך מגדירים את הסמנים כניתנים ללחיצה ונגישים