החל מ-21 בפברואר 2024 (גרסה 3.56), הכלי google.maps.Marker הוצא משימוש. מומלץ לעבור לכיתה החדשה google.maps.marker.AdvancedMarkerElement
. סמנים מתקדמים מספקים שיפורים משמעותיים בהשוואה לכיתה google.maps.Marker
מדור קודם.
מידע נוסף על ההוצאה משימוש הזו
כדי לעדכן סמן מדור קודם לסמן מתקדם, פועלים לפי השלבים הבאים:
- מוסיפים קוד לייבוא ספריית הסמנים. הערה: בגרסה הקודמת של הסמנים (
google.maps.Marker
) אין דרישה כזו. - שינוי
google.maps.Marker
ל-google.maps.marker.AdvancedMarkerElement
- מוסיפים מזהה מפה לקוד האתחול של המפה. לדוגמה,
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. מידע נוסף על כל מה שאפשר לעשות עם סמנים מתקדמים: