Como criar IDs de mapa

Selecione a plataforma: Android Android 3D iOS iOS 3D JavaScript Web Service

Um ID de mapa é um identificador exclusivo que representa as configurações de estilo e configuração do Google Maps armazenadas no Google Cloud. Você usa IDs de mapa para ativar recursos ou gerenciar ou estilizar mapas em seus sites e aplicativos. É possível criar IDs de mapa para cada plataforma de que você precisa (JavaScript, Android, iOS ou mapas estáticos) no projeto do console do Google Cloud na página Gerenciamento de mapas.

Para mais detalhes e recursos que usam IDs de mapa, consulte Visão geral do ID do mapa.

Permissões necessárias

Para criar ou gerenciar IDs de mapa no seu projeto, use um principal com as permissões de nível de papel adequadas, editor ou proprietário, na página IAM do console do Cloud para o projeto. Para mais detalhes, consulte Referência dos papéis básicos e predefinidos do IAM.

Criar IDs de mapa

Crie IDs de mapa no console do Cloud seguindo estas etapas:

  1. Faça login e abra um projeto do console do Cloud com as permissões necessárias.

  2. No console do Cloud, acesse a página Gerenciamento de mapas.

  3. Clique em Criar ID do mapa.

    Criar novo ID do mapa

  4. Na página Criar ID do mapa, faça o seguinte:

    1. Em Nome, dê um nome ao ID do mapa.
    2. Opcional: em Descrição, descreva para que o ID do mapa é usado.
    3. Em Tipo de mapa, selecione a plataforma em que você planeja usar o ID do mapa. Se você escolher JavaScript, também escolha um tipo de mapa Raster (padrão) ou vetorial. Para mais informações sobre mapas vetoriais, consulte Mapas vetoriais.
    4. Clique em Salvar para mostrar o novo ID do mapa.

Associar um ID do mapa a um estilo de mapa

Se você estiver usando a Estilização de mapas baseada na nuvem, associe um estilo de mapa ao ID. Para mais detalhes, consulte Associar seu estilo a um ID do mapa.

Adicionar o ID do mapa ao seu app

Android

Adicione o ID de mapa com um <fragment> elemento no arquivo de layout da atividade, usando a classe MapView ou aplicando a classe GoogleMapOptions por programação.

Por exemplo, suponha que você tenha criado um ID do mapa armazenado como um valor de string chamado map_id em res/values/strings.xml:

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

No caso de mapas adicionados ao arquivo de layout da atividade usando um elemento <fragment>, todos os fragmentos que devem ter o estilo personalizado precisam especificar o ID no atributo 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" />

Você também pode usar o atributo map:mapId da classe MapView para especificar um ID do mapa:

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

Se quiser especificar um ID de maneira programática, transmita para uma instância MapFragment usando a classe 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))
 )

No Android Studio, crie e execute seu app normalmente. Os estilos personalizados configurados na primeira etapa são aplicados a todos os mapas com o ID especificado.

Android 3D

Defina a propriedade de string mapId no Map3DOptions de forma programática ou usando atributos de layout. Os Map3DOptions são fornecidos ao objeto Map3DView durante a instanciação e não podem ser alterados depois que Map3DView é construído.

Os desenvolvedores podem implementar um novo OnMapIdErrorListener para receber notificações e reagir a um ID de mapa inválido ou não encontrado.

Adicione um ID de mapa, criando o mapa de forma programática e definindo um 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.
        }
      }
    )
  }
}

Adicione um ID de mapa usando atributos de layout:

<?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

Para instanciar um mapa usando um ID, faça o seguinte:

  1. Crie um GMSMapID com a string do ID do mapa no console do Cloud.
  2. Crie um GMSMapView especificando o ID do mapa que você acabou de criar.

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;

Se você estiver usando seu próprio ID de mapa, poderá defini-lo no console do Cloud para ter um novo estilo a qualquer momento. Esse estilo será refletido na visualização do mapa automaticamente para você e os usuários em cerca de seis horas.

Se você quiser ver as mudanças imediatamente, feche e reinicie o app. O mapa atualizado vai aparecer.

iOS 3D

Os desenvolvedores de iOS podem definir um novo modificador style no Map. Esse modificador aceita um ID do mapa e, opcionalmente, um fechamento a ser invocado quando o ID do mapa for inválido ou não encontrado.

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

Para criar um mapa com um ID no código do aplicativo:

  1. Se você já estiver personalizando o mapa com código JSON incorporado, remova a styles propriedade do seu MapOptions objeto. Caso contrário, pule esta etapa.

  2. Adicione um ID do mapa usando a propriedade mapId. Exemplo:

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

JavaScript 3D

Para criar um mapa com um ID no aplicativo, adicione um ID do mapa usando a propriedade mapId. Exemplo:

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

Para adicionar um ID do mapa a um mapa novo ou atual que usa uma das nossas APIs de serviço da Web, anexe o parâmetro de URL map_id e defina-o como o ID do mapa. Este exemplo mostra como adicionar um ID do mapa a um mapa usando a API Maps Static.

<img src="/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=%3Cspan%20data-devsite-credential-type="api_key" class="replaceable-credential">YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

Um mapa centralizado na Brooklyn Bridge, em Nova York, NY, EUA, com controles do mapa no canto inferior direito. O mapa mostra um estilo personalizado nas vias, na água e na terra.

Se você tiver uma assinatura digital no URL estático do Maps antes de adicionar o ID do mapa, será necessário criar e adicionar uma nova assinatura digital após adicionar o ID do mapa. Ao gerar a nova chave secreta de assinatura do URL, remova a assinatura digital anterior do URL.