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

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

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

1. מוסיפים קוד לייבוא של ספריית הסמנים (ראו את השלבים בהמשך).
2. אם הצהרת הייבוא היא AdvancedMarker, אפשר להשמיט את הנתיב המלא.google.maps.Markergoogle.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>

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

מידע נוסף על טעינת 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',
});

אחרי המיגרציה

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

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

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

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