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

החל מ-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'. אפשר להשתמש ב-"DEMO_MAP_ID" אם אין לכם מזהה מפה.

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

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

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

מידע נוסף על טעינת ה-API ל-JavaScript של מפות Google

דוגמאות

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

לפני ההעברה

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