עיצוב מפות מבוסס-ענן

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

בעיצובים שנוצרו לפני 15 בספטמבר 2020 לא יוצגו תכונות טבעיות משופרות של מפות Google. כדי להשתמש בתכונות הטבעיות המשופרות של מפות Google, תצטרכו ליצור סגנון מפה.

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

בין התכונות האלה נכללים:

  • סגנון מפות מבוסס-ענן: במקום לעצב את המפה בקוד באמצעות JSON, אפשר לנהל ולעצב את המפות הדינמיות או הסטטיות במסוף Cloud באמצעות מזהי מפות וסגנונות מפה.
  • Vector Map: מפתחי JavaScript יכולים להשתמש באותה מפה מבוססת וקטור עם האצת WebGL שזמינה ב-maps.google.com ישירות באפליקציות האינטרנט שלהם.
  • סינון של נקודות עניין עסקיות: אפשר להסיר מתצוגת המפה חמש קטגוריות של נקודות עניין עסקיות.
  • בקרת צפיפות של נקודות עניין: אפשר להתאים את הצפיפות של נקודות העניין שמוצגות במפת הבסיס כך שיוצגו יותר נקודות עניין כברירת מחדל.

עיצוב מפות מבוסס-ענן זמין ב-SDK של מפות Google ל-Android1, ב-SDK של מפות Google ל-iOS, ב-JavaScript וב-API של מפות סטטיות של מפות Google, אך לא כל התכונות יהיו גלויות בכל הפלטפורמות.

לפני שמתחילים

  • יוצרים מזהה מפה
    כדי להשתמש בעיצוב מפות מבוסס-ענן, יש לטעון את המפה באמצעות מזהה מפה.
  • מעבר מסגנון בתוך הקוד
    לפני שמוסיפים מזהה מפה כדי להשתמש בעיצוב מפות מבוסס-ענן במפה קיימת, שמותאם אישית בעזרת סגנון בתוך הקוד, כמו JSON או פרמטרים של שאילתות בכתובות URL, מומלץ להסיר את הסגנון בתוך הקוד כדי למנוע התנגשות עם פונקציונליות עתידית. אפשר לייבא את סגנון ה-JSON לסגנון מפה חדש.
* שדרוג של ה-SDK של מפות Google ל-Android
כדי להשתמש בעיצוב מפות מבוסס-ענן, יש להשתמש ב-SDK של מפות Google ל-Android בגרסה 18.0.0 ואילך ולהשתמש בגרסה העדכנית ביותר של ה-SDK של מפות Google ל-Android.

חיוב

כדי להשתמש בעיצוב מפות מבוסס-ענן, צריך מזהה מפה. ב-SDK של מפות Google ל-Android, ב-SDK של מפות ל-iOS וב-JavaScript, השימוש במזהה מפה מוביל לחיוב מק"ט של מפות דינמיות. ב-מפות Google Static API, שימוש במזהה מפה מוביל לחיוב על המק"ט של Static Maps.

דוגמאות

Android

הפעלת האפליקציה לדוגמה ApiDemos

כדי להפעיל את האפליקציה לדוגמה של ApiDemos, יש לעיין בדוגמה של GitHub (Java | Kotlin) ולהציג את ההדגמה של CloudBasedMapStylingDemoActivity (Java | Kotlin).

תוכלו למצוא אפליקציה לדוגמה של Java ו-Kotlin שמדגימה איך לסגנן את מפת Android מהענן.

בעיות ידועות

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

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

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

iOS

הפעלת האפליקציה לדוגמה ApiDemos

כדי להפעיל את האפליקציה לדוגמה של ApiDemos, הציגו את האפליקציה לדוגמה של GoogleMap ואת הפרויקט של CloudBasedMapStylingViewController (דוגמה מ-GitHub של Swift | Objective-C).

הדגמה אופציונלית של Cloud Styling CocoaPod או GitHub

במקום להתחיל מאפס, תוכלו לנסות את האפליקציה לדוגמה Objective-C שמדגימה כאן איך לעצב את מפת iOS מהענן.

פיתוח אפליקציית ההדגמה (בטא)

ב-Xcode, צריך ללחוץ על לחצן ההידור כדי לבנות ואז להריץ את הסכמה הנוכחית. גרסת ה-build יוצרת שגיאה ומופיעה בקשה להזין את מפתח ה-API בקובץ SDKDemoAPIKey.h.

אם עדיין אין לכם מפתח API, עליכם לפעול לפי ההוראות האלה כדי להגדיר פרויקט במסוף Cloud ולקבל מפתח API. כשמגדירים את המפתח ב-Cloud Console, אפשר לציין את מזהה החבילה של האפליקציה כדי לוודא שרק האפליקציה תוכל להשתמש במפתח. מזהה החבילה שמוגדר כברירת מחדל באפליקציה לדוגמה של SDK הוא com.example.GoogleMapsDemos.

עורכים את הקובץ SDKDemoAPIKey.h ומדביקים את מפתח ה-API בהגדרה של קבוע ה-kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

אם מופיעה ב-Xcode בקשה לבטל את הנעילה של הקובץ SDKDemoAPIKey.h לצורך עריכה, בוחרים באפשרות Unlock.

מסירים את השורה הבאה:

```
#error Register for API Key and insert here.
```

בונים ומפעילים את הפרויקט.

הדגמה של עיצוב המפה מבוסס-ענן

בהדגמה של CloudStyling אפשר לראות איך לסגנן את המפה באמצעות סגנון שהוגדר במסוף Google Cloud.

בעת הפעלת אפליקציית ההדגמה, לחצו על ההדגמה 'התאמה אישית של מפה' בקטע Beta Samples (דגימות בטא) בחלק העליון של הרשימה.

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

אתם יכולים גם לנסות להוסיף סגנון משלכם ('מפת סגנון' > 'הוספת מזהה מפה חדש'), ולראות איך המפה מתעדכנת במפה עם סגנונות מותאמים אישית.

JavaScript

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

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js
להצגת דוגמה

ניסוי לדוגמה

Maps Static API

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

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

  2. כדי להוסיף מזהה מפה למפה חדשה או קיימת שמשתמשת באחד מממשקי ה-API שלנו לאינטרנט, צריך לצרף את הפרמטר map_id של כתובת האתר ולהגדיר אותו למזהה המפה שלכם. בדוגמה הזו מוצג הוספה של מזהה מפה למפה באמצעות Maps Static API.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

  1. עיצוב מפות מבוסס-ענן לא זמין במצב טעינה מהירה של Android.↩