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