איך יוצרים מזהי מפה

בחירת פלטפורמה: Android Android 3D iOS iOS 3D JavaScript Web Service

רכיבים בתשלום: כשמשתמשים ברכיבים שדורשות הוספה של מזהה מפה, הפעולה הזו מפעילה הצגה של מפה שמחויבת במסגרת Dynamic Maps SKU ל-Android ול-iOS. מידע נוסף זמין במאמר בנושא חיוב במפות Google.

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

מידע נוסף על מזהי מפות ותכונות שמשתמשות בהם זמין במאמר סקירה כללית על מזהי מפות.

ההרשאות הנדרשות

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

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

כדי ליצור מזהי מפות ב-Cloud Console:

1. נכנסים לפרויקט במסוף Cloud ופותחים אותו עם ההרשאות הנדרשות.

2. נכנסים אל הדף לניהול מפות במסוף Cloud.

3. לוחצים על יצירת מזהה מפה.

   

4. בדף Create new map ID, מבצעים את הפעולות הבאות:

   1. בשדה שם, נותנים שם למזהה המפה.
   2. אופציונלי: בשדה Description, מתארים את השימוש במזהה המפה.
   3. בקטע סוג המפה, בוחרים את הפלטפורמה שבה רוצים להשתמש במזהה המפה. אם בוחרים ב-JavaScript, צריך לבחור גם סוג מפה: רסטר (ברירת המחדל) או וקטור. מידע נוסף על מפות וקטוריות זמין במאמר מפות וקטוריות.
   4. לוחצים על שמירה כדי להציג את מזהה המפה החדש.

שיוך של מזהה מפה לסגנון מפה

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

הוספת מזהה המפה לאפליקציה

Android

מוסיפים את מזהה המפה באמצעות רכיב <fragment> בקובץ הפריסה של הפעילות, באמצעות המחלקה MapView או באופן פרוגרמטי באמצעות המחלקה GoogleMapOptions.

לדוגמה, נניח שיצרתם מזהה מפה שמאוחסן כערך מחרוזת בשם map_id ב-res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

במפות שנוספו באמצעות רכיב <fragment> בקובץ הפריסה של הפעילות, כל מקטעי המפה שצריכים להיות בסגנון אישי חייבים לציין את מזהה המפה במאפיין map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

אפשר גם להשתמש במאפיין map:mapId של המחלקה MapView כדי לציין מזהה מפה:

<com.google.android.gms.maps.MapView
    xmlns:map="http://schemas.android.com/apk/res-auto"
    ....
    map:mapId="@string/map_id" />

כדי לציין מזהה מפה באופן פרוגרמטי, מעבירים אותו למכונה של MapFragment באמצעות המחלקה GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

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

‫Android 3D

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

הוספת מזהה מפה, יצירת המפה באופן פרוגרמטי:

import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode

class MainActivity : Activity(), OnMap3DViewReadyCallback {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }
}

מוסיפים מזהה מפה באמצעות מאפייני פריסה:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:map3d="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent" android:layout_height="match_parent">
 <com.google.android.gms.maps3d.Map3DView
     android:id="@+id/map3dView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     map3d:mode="hybrid"
     map3d:mapId="MAP_ID"/>
</LinearLayout>

iOS

כדי ליצור מופע של מפה באמצעות מזהה מפה, מבצעים את הפעולות הבאות:

1. יוצרים GMSMapID עם מחרוזת מזהה המפה ממסוף Cloud.
2. יוצרים GMSMapView ומציינים את מזהה המיפוי שיצרתם.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

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

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

iOS 3D

מפתחים ל-iOS יכולים להגדיר משנה style חדש ב-Map. המשנה הזה מקבל מזהה מיפוי, ואפשרותית גם סגירה (closure) שתופעל אם מזהה המיפוי לא תקין או לא נמצא.

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
        latitude: 0.0,
        longitude: 0.0,
      ),
      mode: .hybrid
    )
    .style(
      with: "MAP_ID",
      error: {
        // Handle styling error.
      }
    )
    // Could also use trailing closure syntax
    //  .style(with: "MAP_ID") {
    //     // Handle styling error.
    //  }
  }
}

JavaScript

כדי ליצור מפה עם מזהה מפה בקוד האפליקציה:

1. אם אתם כבר משתמשים בקוד JSON מוטמע כדי להתאים אישית את המפה, צריך להסיר את המאפיין styles מהאובייקט MapOptions. אחרת, אפשר לדלג על השלב הזה.

2. מוסיפים מזהה מפה למפה באמצעות המאפיין mapId. לדוגמה:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

‫JavaScript בתלת-ממד

כדי ליצור מפה עם מזהה מפה באפליקציה, מוסיפים מזהה מפה למפה באמצעות המאפיין mapId. לדוגמה:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
index.js

Maps Static

כדי להוסיף מזהה מפה למפה חדשה או קיימת שמשתמשת באחד מממשקי ה-API של שירותי האינטרנט שלנו, מוסיפים את הפרמטר map_id של כתובת ה-URL ומגדירים אותו למזהה המפה. בדוגמה הזו מוצגת הוספה של מזהה מפה למפה באמצעות 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=MAP_ID&signature=YOUR_SIGNATURE" />

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