מתחילים

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

כדי להשתמש בסגנון מבוסס-נתונים לגבולות, צריך ליצור מזהה מפה שמשתמש במפה הווקטורית של JavaScript. בשלב הבא, צריך ליצור סגנון מפה חדש, לבחור את שכבות התכונות של הגבולות הרצויות ולשייך את הסגנון למזהה המפה.

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

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

יצירת סגנון מפה חדש

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

בחירת שכבות תכונות

במסוף Google API אפשר לבחור אילו שכבות תכונות יוצגו. ההגדרה הזו קובעת אילו סוגי גבולות יופיעו במפה (לדוגמה, יישוב, מדינה וכו').

חשוב: כדי לשפר את הביצועים, מומלץ לבחור רק את השכבות הנחוצות.

ניהול שכבות תכונות

1. במסוף Google API, עוברים לדף Map Styles.
2. אם מתבקשים, בוחרים פרויקט.
3. בוחרים סגנון מפה.
4. לוחצים על התפריט הנפתח שכבות תכונות כדי להוסיף או להסיר שכבות.
5. לוחצים על שמירה כדי לשמור את השינויים ולהפוך אותם לזמינים במפות.

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

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

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

1. כדי לטעון את Maps JavaScript API, מוסיפים את ה-loader של bootstrap לקוד האפליקציה, כפי שמתואר בקטע הקוד הבא:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

הערה: כמפתחים של אפליקציה עם Maps JavaScript API, באחריותכם לוודא שהאפליקציה עומדת בדרישות החוקים המקומיים על ידי הבטחת היישום של לוקליזציית האזור המתאימה למדינה שבה האפליקציה מתארחת.

1. צריך לספק מזהה מפה כשיוצרים את המפה באמצעות המאפיין mapId. זה צריך להיות מזהה המפה שהגדרתם באמצעות סגנון מפה עם שכבות תכונות מופעלות.

   map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
   });

מידע נוסף על טעינת Maps JavaScript API

הוספת שכבות תכונות למפה

כדי לקבל הפניה לשכבת תכונות במפה, צריך להפעיל את map.getFeatureLayer() בזמן שמפעילים את המפה:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

בדיקת היכולות של המפה

כדי להשתמש בסגנון מבוסס-נתונים לגבולות, צריך להפעיל את היכולות האלה במסוף Google API ולשייך אותן למזהה מפה. מכיוון שמזהי המפה הם זמניים ועשויים להשתנות, אפשר להפעיל את map.getMapCapabilities() כדי לוודא שיכולת מסוימת (למשל, עיצוב מבוסס-נתונים) זמינה לפני שמפעילים אותה. הבדיקה הזו היא אופציונלית.

בדוגמה הבאה מוסבר איך מוסיפים מאזין כדי להירשם לשינויים ביכולות המפה:

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

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

השלבים הבאים

• הגדרת סגנון למולטיפון גבול
• יצירת מפה כורופלתית
• טיפול באירועי עכבר
• קבלת מזהה מקום לאזור
• שימוש בממשקי ה-API של Geocoding ו-Places עם עיצוב מבוסס-נתונים לגבולות