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

Выберите платформу: 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. В разделе Map type (Тип карты) выберите платформу, на которой планируете использовать идентификатор карты. Если вы выберете 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 предыдущую цифровую подпись.