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

החל מ-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' לצורך בדיקה, אם עדיין אין לכם מזהה מפה.

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

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