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

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

כדי לעדכן סמן מדור קודם לסמן מתקדם:

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

אחרי ההעברה

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

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

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