תחילת העבודה

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

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

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

קבלת מפתח API

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

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

עדכון הקוד של אתחול המפה

לשם כך, צריך את מזהה המפה שיצרתם. ניתן למצוא את הפרופיל במפות Google שלך. ניהול.

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'
   });

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

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

השלבים הבאים

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