Как создать идентификаторы карт

Выберите платформу: Android Android 3D iOS iOS 3D JavaScript Веб-сервисы

Идентификатор карты – это уникальный идентификатор, который представляет настройки стиля и конфигурации Google Карт, хранящиеся в Google Cloud. Идентификаторы карт позволяют включать функции, а также управлять картами и их стилями на сайтах и в приложениях. Вы можете создать идентификаторы карт для каждой нужной платформы (JavaScript, Android, iOS или статические карты) в проекте консоли Google Cloud на странице Управление картами.

Подробнее об идентификаторах карт и функциях, в которых они используются…

Требуемые права доступа

Чтобы создавать идентификаторы карт в проекте и управлять ими, необходимо использовать субъекта с соответствующими разрешениями на уровне роли (редактор или владелец) на странице IAM в Cloud Console для проекта. Подробнее о стандартных и встроенных ролях IAM…

Как создать идентификаторы карт

Чтобы создать идентификаторы карт в Cloud Console, выполните следующие действия:

  1. Войдите в проект Cloud Console с необходимыми разрешениями.

  2. В Cloud Console перейдите на страницу управления картами.

  3. Нажмите Создать идентификатор карты.

    Создание идентификатора карты

  4. На странице Создать новый идентификатор карты выполните следующие действия:

    1. В поле Name (Название) укажите название идентификатора карты.
    2. Необязательно. В поле Описание укажите, для чего используется идентификатор карты.
    3. В поле Тип карты выберите платформу, на которой планируете использовать идентификатор карты. Если вы выберете JavaScript, то также сможете выбрать тип карты: Растровая (по умолчанию) или Векторная. Подробнее о векторных картах…
    4. Нажмите Сохранить, чтобы увидеть новый идентификатор карты.

Как связать идентификатор карты со стилем карты

Если вы используете облачные стили карт, то связываете стиль карты с ее идентификатором. Подробнее о том, как связать стиль с идентификатором карты…

Добавьте идентификатор карты в приложение

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

Чтобы создать экземпляр карты с помощью идентификатора карты, выполните следующие действия:

  1. Создайте GMSMapID со строкой идентификатора карты из Cloud Console.
  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 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

Чтобы создать карту с идентификатором в коде приложения:

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

Карта с центром в Бруклинском мосту в Нью-Йорке, США, с кнопками управления картой в правом нижнем углу. На карте отображается собственный стиль дорог, воды и суши.

Если в статическом URL Карт до добавления идентификатора карты была цифровая подпись, после добавления идентификатора карты вам нужно будет создать и добавить новую цифровую подпись. При создании нового секрета для подписания URL не забудьте удалить из URL предыдущую цифровую подпись.