Visão geral

Selecione a plataforma: Android iOS JavaScript

Os mapas 3D na API Maps JavaScript ajudam a criar experiências imersivas de mapa 3D. Ela oferece ferramentas para personalizar a estilização de mapas, melhorar a acessibilidade e a usabilidade, permitindo o desenvolvimento de aplicativos envolventes e interativos.

Exemplo do que você pode fazer com os mapas 3D na API Maps JavaScript:

Por que usar mapas 3D na API Maps JavaScript

Os mapas 3D na API Maps JavaScript oferecem a classe Map3DElement (<gmp-map-3d>) na biblioteca maps3d para que você possa usar as imagens 3D do Google nos seus aplicativos. Os mapas 3D oferecem uma experiência de renderização 3D integrada, permitindo que você incorpore ou teste ambientes reais, vistas de cidades e tours por pontos turísticos em 3D.

Use 3D <gmp-map-3d> (Map3DElement na biblioteca maps3d) para terreno em 3D, inclinação da câmera, direção e sobrevoos de alcance, construções em 3D extrudadas e objetos em 3D, como Marker3DElement (<gmp-marker-3d>). Para mapas de estradas em 2D, alfinetes padrão em 2D AdvancedMarkerElement e estilo vetorial em 2D, use 2D <gmp-map> (MapElement ou google.maps.Map na biblioteca maps).

O que é possível fazer com os mapas 3D na API Maps JavaScript?

• Crie experiências de mapa realistas: renderize imagens aéreas 3D fotorrealistas de cidades, terrenos e pontos de referência no modo SATELLITE ou HYBRID (que sobrepõe rótulos de mapa base em imagens de satélite) ou mostre um mapa base 3D estilizado no modo ROADMAP usando a propriedade mode. Para mais informações, consulte Mudar o modo do mapa.
• Personalize o estilo do mapa:
  • Estilização de mapas baseada na nuvem 3D: controle a visibilidade e a estilização de pontos de interesse (PDIs) e estradas do mapa de base. Para mais informações, consulte Personalizar mapas 3D.
  • Marcadores, popovers, polilinhas e polígonos personalizados: identifique locais e desenhe rotas ou limites em 3D no mapa usando MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement e Polygon3DElement. Para mais informações, consulte Marcadores, Popovers e Formas e linhas.
  • Modelos 3D e recursos glTF: adicione modelos 3D glTF PBR personalizados de edifícios, pontos de referência ou objetos em coordenadas do mundo real usando Model3DElement. Para mais informações, consulte Modelos.
• Criar mapas imersivos:
  • Caminhos de câmera predefinidos: guie os usuários pelo mapa 3D com sobrevoos de câmera predefinidos e animações orbitais usando flyCameraTo e flyCameraAround. Para mais informações, consulte Animar trajetos da câmera.
  • Controlar a interação do usuário: personalize os controles e o movimento da câmera disponíveis para os usuários. Para mais informações, consulte Controles e exploração de mapas em 3D, Restringir a visualização e os limites da câmera e Controlar a posição da câmera.

Exemplo rápido

Para carregar a biblioteca maps3d e renderizar um elemento <gmp-map-3d> com mode="HYBRID", center (lat,lng,altitude), range, tilt e heading, use o seguinte snippet:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Substitua YOUR_API_KEY pela sua chave de API da Plataforma Google Maps.

Como usar mapas 3D na API Maps JavaScript

1	Configurar	Comece com Configurar a API JavaScript e conclua as instruções de configuração a seguir.
2	Entenda como a API Maps JavaScript cobra	Para mais informações, consulte Uso e faturamento.
3	Criar um mapa	Para mais informações, consulte Começar.

Cobertura

As malhas fotorrealistas em 3D de construções e pontos de referência estão disponíveis em algumas áreas metropolitanas nos países e regiões com suporte. Em regiões sem cobertura de malha 3D (como a Índia), o <gmp-map-3d> renderiza imagens de satélite ou de mapa de estradas em 2D sobrepostas à elevação do terreno em 3D, sem construções em 3D extrudadas. Para mostrar um ponto de referência em uma área sem cobertura de malha 3D, coloque um modelo 3D glTF personalizado nas coordenadas usando Model3DElement ou use um <gmp-map> 2D. Para saber a disponibilidade por país (na coluna Maps JavaScript 3D), consulte Detalhes de cobertura da Plataforma Google Maps.

Próximas etapas

• Confira o guia de Introdução para criar um mapa 3D "Hello World".
• Confira o codelab de introdução para saber como adicionar recursos ao mapa.
• Amplie seu conhecimento sobre marcadores e animação no próximo codelab.
• Encontre na coleção do Google uma amostra que funcione para seu caso de uso.