דוגמאות מדור קודם

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).

הדגמה אופציונלית של עיצוב ענן של CocoaPod או GitHub

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

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

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

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

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

static NSString *const kAPIKey = @"YOUR_API_KEY";

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

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

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

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

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

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

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

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

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

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

  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" />