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

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

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

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

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

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

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

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

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

חיוב

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

דוגמאות

Android

מריצים את האפליקציה לדוגמה של ApiDemos

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

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

בעיות ידועות

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

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

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

iOS

מריצים את האפליקציה לדוגמה של ApiDemos

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

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

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

פיתוח אפליקציית ההדגמה של גרסת הבטא

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

אם עדיין אין לכם מפתח API, תוכלו לבצע את ההוראות האלה כדי להגדיר פרויקט ב-Cloud Console ולקבל מפתח 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 Console.

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

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

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

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 שלנו לאינטרנט, מוסיפים את הפרמטר של כתובת ה-URL של 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. עיצוב מפות מבוסס-ענן אינו זמין במצב Lite של Android.↩