שנתחיל?

בחירת פלטפורמה: Android iOS JavaScript

יש לפעול לפי השלבים הבאים כדי להגדיר את הסמנים המתקדמים.

קבלת מפתח API והפעלה של Maps JavaScript API

כדי להשתמש בסמנים מתקדמים, צריך פרויקט בענן עם חשבון לחיוב ולהפעיל את Maps JavaScript API. מידע נוסף על הגדרת הפרויקט ב-Google Cloud

קבלת מפתח API

יצירת מזהה מפה

כדי ליצור מזהה מפה חדש, יש לפעול לפי השלבים במאמר התאמה אישית של Cloud. מגדירים את סוג המפה ל-JavaScript ובוחרים באפשרות Vector או באפשרות Raster.

חשוב: כדי לבצע בדיקה, אפשר לדלג על השלב של יצירה והגדרה של מזהה מפה באמצעות mapId: 'DEMO_MAP_ID' בקוד האפליקציה. DEMO_MAP_ID מיועד למטרות בדיקה בלבד. אין להשתמש ב-DEMO_MAP_ID בסביבת ייצור.

עדכון הקוד להפעלת המפה

כדי לעשות זאת, יש צורך במזהה המפה שיצרתם. תוכלו למצוא אותו בדף ניהול מפות.

1. טוענים את Maps JavaScript API.

2. במקרה הצורך, טוענים את ספריית הסמנים המתקדמים מתוך הפונקציה async:

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
   

3. יש לספק מזהה מפה כשיוצרים מופע במפה באמצעות הנכס mapId. זה יכול להיות מזהה המפה שסיפקת, או DEMO_MAP_ID.

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

זהירות: המפות לדוגמה של סמנים מתקדמים כוללות מזהי מפות שמקושרים לסגנון מפה מצומצם עם נקודות עניין. אם אתם משתמשים שוב בקוד לדוגמה, מומלץ להחליף את מזהי המפה האלה ב-DEMO_MAP_ID, או במזהה מפה משלכם.

בדיקת היכולות של המפה (אופציונלי)

כדי להשתמש בסמנים מתקדמים צריך מזהה מפה. אם מזהה המפה חסר או שהועבר מזהה מפה לא חוקי, לא ניתן לטעון סמנים מתקדמים. כשלב בתהליך פתרון הבעיות, תוכלו להוסיף האזנה לmapcapabilities_changed כדי להירשם לשינויים ביכולת המפה. בעמודה הזו יצוין אם התנאים הבאים מתקיימים:

• מזהה מפה חוקי נמצא בשימוש.
• מזהה המפה משויך למפה וקטורית, אם משתמשים בתכונות שמחייבות מפת וקטור.

השימוש ביכולות במפה הוא אופציונלי ומומלץ רק למטרות בדיקה ופתרון בעיות, או למטרות גיבוי בזמן ריצה.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

השלבים הבאים

יצירת סמן מתקדם שמוגדר כברירת מחדל