Como criar IDs de mapa

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 e estilizar mapas nos seus sites e aplicativos. Você pode criar IDs de mapa para cada plataforma necessária (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 apropriadas no nível da função (Editor ou Proprietário) na página do 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 de gerenciamento do Maps.

  3. Clique em Criar ID do mapa.

    Criar ID do mapa

  4. Na página Criar novo ID de 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 selecione um tipo de mapa Raster (o padrão) ou Vetor. Para mais informações sobre mapas vetoriais, consulte Mapas vetoriais.
    4. Clique em Salvar para mostrar seu 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 ao ID do mapa. Para mais detalhes, consulte Associar seu estilo a um ID do mapa.

Adicionar o ID do mapa ao seu app

Android

Adicione o ID do mapa com um elemento <fragment> no arquivo de layout da atividade, usando a classe MapView ou de forma programática com a classe GoogleMapOptions.

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. Map3DOptions são fornecidos ao objeto Map3DView durante a instanciação e não podem ser alterados depois que Map3DView é construído.

Adicione um ID do mapa, criando o mapa de forma programática:

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)
  }
}

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 de ID do mapa do 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á definir um novo estilo no console do Cloud a qualquer momento. Esse estilo será refletido automaticamente na visualização do mapa para você e os usuários em cerca de seis horas.

Se quiser ver as mudanças imediatamente, feche e reinicie o app. Para isso, saia do app, force o encerramento dele na lista de apps usados recentemente e abra novamente. O mapa atualizado vai aparecer.

iOS 3D

Os desenvolvedores de iOS podem definir um novo modificador style em Map. Esse modificador aceita um ID do mapa e, opcionalmente, um fechamento a ser invocado quando o ID do mapa é 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 seu mapa com código JSON incorporado, remova a propriedade styles do objeto MapOptions. Caso contrário, pule esta etapa.

  2. Adicione um ID ao 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'
});

3D em JavaScript

Para criar um mapa com um ID no seu aplicativo, adicione um ID ao 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, adicione o parâmetro de URL map_id e defina-o como seu ID do mapa. Este exemplo mostra como adicionar um ID de mapa a um mapa usando a API Maps Static.

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

Um mapa centralizado na Ponte do Brooklyn, em Nova York, NY, EUA, com controles do mapa no canto inferior direito. O mapa mostra a estilização personalizada 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, crie e adicione uma nova assinatura digital depois de adicionar o ID do mapa. Ao gerar a nova chave secreta de assinatura do URL, remova a assinatura digital anterior do URL.