מתחילים

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

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

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

קבלת מפתח API

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

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

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

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

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_changedlistener כדי להירשם לשינויים ביכולות המפה. השימוש ביכולות של מפות הוא אופציונלי, ומומלץ רק למטרות בדיקה ופתרון בעיות, או למטרות חזרה למצב קודם בזמן ריצה.

// 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.
  }
});

השלבים הבאים

הוספת סמן למפה