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

החל מ-21 בפברואר 2024 (גרסה 3.56), אנחנו מוציאים משימוש את הכלי 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' למטרות בדיקה אם אין לך מפה המזהה הזה כבר קיים.

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

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

• אם דף האינטרנט משתמש בטעינת סקריפט דינמית, צריך להוסיף את ספריית הסמנים לייבא את 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
• שליטה בהתנהגות ההתנגשות, בגובה ובחשיפה
• מוודאים שהסמנים ניתנים ללחיצה ונגישים