Идентификатор карты – это уникальный код, который представляет настройки стиля и конфигурации Google Карт, хранящиеся в Google Cloud. Идентификаторы карт позволяют включать функции, а также управлять картами и их стилями на сайтах и в приложениях. Вы можете создать идентификаторы карт для каждой нужной платформы (JavaScript, Android, iOS или статических карт) в проекте консоли Google Cloud на странице Управление картами.
Подробнее об идентификаторах карт и функциях, в которых они используются…
Требуемые права доступа
Чтобы создавать идентификаторы карт в проекте и управлять ими, у вас должны быть права редактора или владельца на странице IAM в Cloud Console. Подробную информацию вы найдете в справочнике по базовым и стандартным ролям IAM.
Создание идентификаторов карт
Чтобы создать идентификаторы карт в Cloud Console, выполните следующие действия:
Войдите в аккаунт и откройте проект в консоли Cloud с необходимыми разрешениями.
В Cloud Console перейдите на страницу Maps Management (Управление картами).
Нажмите Создать идентификатор карты.
На странице Create new map ID (Создать идентификатор карты) выполните следующие действия:
- В поле Name (Название) укажите название идентификатора карты.
- Необязательно. В поле Описание укажите, для чего используется идентификатор карты.
- В поле Тип карты выберите платформу, на которой планируете использовать идентификатор карты. Если вы выберете JavaScript, то также сможете выбрать тип карты: Растровая (по умолчанию) или Векторная. Подробнее о векторных картах…
- Нажмите Сохранить, чтобы увидеть новый идентификатор карты.
Как связать идентификатор карты со стилем карты
Если вы используете облачные стили карт, то связываете стиль карты с ее идентификатором. Подробнее о том, как связать стиль с идентификатором карты…
Добавьте идентификатор карты в приложение
Android
Вы можете добавить идентификатор карты в элемент <fragment> файла макета для объекта activity. Это можно сделать с помощью класса 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> в файле макета для объекта activity, то во всех фрагментах карты с собственным стилем должен быть указан идентификатор карты в атрибуте 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
Чтобы создать экземпляр карты с помощью идентификатора карты, выполните следующие действия:
- Создайте
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 Console. Этот стиль будет автоматически применен к вашей карте в течение шести часов.
Если вы хотите увидеть изменения сразу, закройте приложение, принудительно остановите его в списке недавно использованных приложений и откройте снова. После этого вы увидите обновленную карту.
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" />