מזהה מפה הוא מזהה ייחודי שמייצג את הסגנון של מפות Google והגדרות התצורה שלהן, שמאוחסנים ב-Google Cloud. אתם משתמשים במזהי מפה כדי להפעיל תכונות או לנהל מפות באתרים ובאפליקציות שלכם, או כדי להגדיר את הסגנון שלהן. אפשר ליצור מזהי מפות לכל פלטפורמה שצריך – JavaScript, Android, iOS או מפות סטטיות – בפרויקט שלכם ב-מסוף Google Cloud בדף Map Management (ניהול מפות).
פרטים נוספים ותכונות שמשתמשות במזהי מפות זמינים במאמר סקירה כללית על מזהי מפות.
ההרשאות הנדרשות
כדי ליצור או לנהל מזהי מפות בפרויקט, אתם צריכים להשתמש בחשבון ראשי עם הרשאות מתאימות ברמת התפקיד, עורך או בעלים, בדף IAM במסוף Cloud של הפרויקט. לרשימת כל התפקידים המוגדרים מראש
יצירת מזהי מפות
כדי ליצור מזהי מפות ב-Cloud Console:
נכנסים לפרויקט במסוף Cloud ופותחים אותו עם ההרשאות הנדרשות.
נכנסים אל הדף לניהול מפות במסוף Cloud.
לוחצים על יצירת מזהה מפה.
בדף Create new map ID (יצירת מזהה מפה חדש), מבצעים את הפעולות הבאות:
- בשדה Name (שם), נותנים שם למזהה המפה.
- אופציונלי: בשדה תיאור, מתארים את השימוש במזהה המפה.
- בקטע סוג מפה, בוחרים את הפלטפורמה שבה מתכננים להשתמש במזהה המפה. אם בוחרים באפשרות JavaScript, צריך גם לבחור סוג מפה Raster (ברירת המחדל) או Vector. מידע נוסף על מפות וקטוריות זמין במאמר בנושא מפות וקטוריות.
- לוחצים על שמירה כדי להציג את מזהה המפה החדש.
שיוך מזהה מפה לסגנון מפה
אם אתם משתמשים בעיצוב מפות מבוסס-ענן, אתם משייכים סגנון מפה למזהה המפה. פרטים נוספים זמינים במאמר בנושא שיוך סגנון למזהה מפה.
הוספת מזהה המפה לאפליקציה
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 נוצר.
מפתחים יכולים להטמיע אופציונלית OnMapIdErrorListener חדש כדי לקבל הודעה על מזהה מפה לא תקין או לא נמצא, ולהגיב בהתאם.
מוסיפים מזהה מפה, יוצרים את המפה באופן פרוגרמטי ומגדירים OnMapIdErrorListener:
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, OnMapIdError {
fun onCreate(...) {
val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
val map3DView = Map3DView(context, map3DOptions)
map3DView.getMap3dViewAsync(this)
}
override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
googleMap3D.setMapIdErrorListener(
object : OnMapIdErrorListener {
override fun onMapIdError() {
// Handle error event.
}
}
)
}
}
מוסיפים מזהה מפה באמצעות מאפייני פריסה:
<?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
כדי ליצור מופע של מפה באמצעות מזהה מפה, פועלים לפי השלבים הבאים:
- יוצרים
GMSMapIDעם מחרוזת מזהה המפה מ-Cloud Console. - יוצרים
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. הפרמטר הזה מקבל מזהה של מפה, ואפשרותית גם סגירה שתופעל אם מזהה המפה לא תקין או לא נמצא.
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
כדי ליצור מפה עם מזהה מפה בקוד האפליקציה:
אם כבר התאמתם אישית את המפה באמצעות קוד JSON מוטמע, צריך להסיר את המאפיין
stylesמהאובייקטMapOptions. אחרת, אפשר לדלג על השלב הזה.מוסיפים מזהה למפה באמצעות המאפיין
mapId. לדוגמה:
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
Javascript 3D
כדי ליצור מפה עם מזהה מפה באפליקציה, מוסיפים מזהה מפה למפה באמצעות המאפיין 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();
Maps Static
כדי להוסיף מזהה מפה למפה חדשה או קיימת שמשתמשת באחד מממשקי ה-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=MAP_ID&signature=YOUR_SIGNATURE" />