Draw on the map

Classe Marker3DElement

Classe google.maps.maps3d.Marker3DElement

Mostra uma posição em um mapa 3D. O position precisa ser definido para que o Marker3DElement seja exibido.

Elemento personalizado:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

Essa classe estende HTMLElement.

Essa classe implementa Marker3DElementOptions.

Acesse ligando para const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Parâmetros: 
Cria um Marker3DElement com as opções especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Padrão: AltitudeMode.CLAMP_TO_GROUND
Especifica como o componente de altitude da posição é interpretado.
Atributo HTML:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Tipo:  CollisionBehavior optional
Padrão: CollisionBehavior.REQUIRED
Uma enumeração que especifica como um Marker3DElement deve se comportar quando entra em conflito com outro Marker3DElement ou com os rótulos do mapa de base.
Atributo HTML:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Tipo:  boolean optional
Padrão: false
Especifica se o marcador deve ser desenhado ou não quando estiver oculto. O marcador pode ser ocultado pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Tipo:  boolean optional
Padrão: false
Especifica se o marcador deve ser conectado ao chão. Para extrudar um marcador, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Tipo:  string optional
Texto a ser exibido por esse marcador.
Atributo HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
O local da ponta do marcador. A altitude é ignorada em determinados modos e, portanto, é opcional.
Atributo HTML:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Tipo:  boolean optional
Padrão: false
Especifica se o marcador precisa preservar o tamanho, independentemente da distância da câmera. Por padrão, o marcador é dimensionado com base na distância da câmera/inclinação.
Atributo HTML:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Tipo:  number optional
O zIndex em comparação com outros marcadores.
Atributo HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Todos os elementos personalizados adicionados diretamente ao Marker3DElement serão inseridos, mas apenas os elementos dos tipos HTMLImageElement, SVGElement e PinElement serão usados para desenhar marcadores. Os outros elementos serão ignorados.
HTMLImageElement e SVGElement precisam ser agrupados no elemento <template> antes de serem atribuídos ao slot padrão de Marker3DElement.

No momento, as imagens e os SVGs são rasterizados antes de serem renderizados na cena 3D. Por isso, o HTML personalizado incorporado ao SVG ou às classes CSS adicionadas às imagens não será aplicado e talvez não seja refletido quando os marcadores forem mostrados na tela.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface Marker3DElementOptions

Interface google.maps.maps3d.Marker3DElementOptions

Objeto Marker3DElementOptions usado para definir as propriedades que podem ser definidas em um Marker3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte Marker3DElement.altitudeMode.
collisionBehavior optional
Tipo:  CollisionBehavior optional
Consulte Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Tipo:  boolean optional
Consulte Marker3DElement.drawsWhenOccluded.
extruded optional
Tipo:  boolean optional
Consulte Marker3DElement.extruded.
label optional
Tipo:  string optional
Consulte Marker3DElement.label.
position optional
Consulte Marker3DElement.position.
sizePreserved optional
Tipo:  boolean optional
Consulte Marker3DElement.sizePreserved.
zIndex optional
Tipo:  number optional
Consulte Marker3DElement.zIndex.

Classe Marker3DInteractiveElement

Classe google.maps.maps3d.Marker3DInteractiveElement

Mostra uma posição em um mapa 3D. O position precisa ser definido para que o Marker3DInteractiveElement seja exibido. Ao contrário de Marker3DElement, Marker3DInteractiveElement recebe um evento gmp-click.

Elemento personalizado:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

Essa classe estende Marker3DElement.

Essa classe implementa Marker3DInteractiveElementOptions.

Acesse ligando para const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parâmetros: 
Cria um Marker3DInteractiveElement com as opções especificadas.
gmpPopoverTargetElement
Tipo:  PopoverElement optional
Quando definido, o elemento popover será aberto ao clicar no marcador.
Atributo HTML:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Tipo:  string
texto da sobreposição. Se fornecido, um texto de acessibilidade (por exemplo, para uso com leitores de tela) será adicionado ao Marker3DInteractiveElement com o valor fornecido.
Atributo HTML:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Herdado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Todos os elementos personalizados adicionados diretamente ao Marker3DInteractiveElement serão encaixados, mas apenas os elementos do tipo PinElement serão usados para desenhar marcadores. Os outros elementos serão ignorados.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
Esse evento é acionado quando o elemento Marker3DInteractiveElement é clicado.

Interface Marker3DInteractiveElementOptions

Interface google.maps.maps3d.Marker3DInteractiveElementOptions

Objeto Marker3DInteractiveElementOptions usado para definir as propriedades que podem ser definidas em um Marker3DInteractiveElement.

Essa interface estende Marker3DElementOptions.

gmpPopoverTargetElement optional
Tipo:  PopoverElement optional
Consulte Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Tipo:  string optional
Consulte Marker3DInteractiveElement.title.
Herdado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

Classe google.maps.maps3d.Model3DElement

Um modelo 3D que permite a renderização de modelos gLTF. Observe que position e src precisam ser definidos para que Model3DElement seja exibido.

As propriedades principais do gLTF PBR precisam ser compatíveis. No momento, não há suporte para extensões ou propriedades de extensão.

Elemento personalizado:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

Essa classe estende HTMLElement.

Essa classe implementa Model3DElementOptions.

Acesse ligando para const {Model3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Model3DElement
Model3DElement([options])
Parâmetros: 
Cria um Model3DElement com as opções especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Padrão: AltitudeMode.CLAMP_TO_GROUND
Especifica como a altitude na posição é interpretada.
Atributo HTML:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Descreve a rotação do sistema de coordenadas de um modelo 3D para posicioná-lo no mapa 3D.

As rotações são aplicadas ao modelo na seguinte ordem: rotação, inclinação e direção.
Atributo HTML:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Define a posição do Model3DElement. A altitude é ignorada em determinados modos e, portanto, é opcional.
Atributo HTML:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Tipo:  number|Vector3D|Vector3DLiteral optional
Padrão: 1
Dimensiona o modelo ao longo dos eixos x, y e z no espaço de coordenadas do modelo.
Atributo HTML:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Tipo:  string|URL optional
Especifica o URL do modelo 3D. No momento, apenas modelos no formato .glb são aceitos.

Todos os URLs HTTP relativos serão resolvidos para os absolutos correspondentes.

Se você hospedar os arquivos do modelo do .glb em um site ou servidor diferente do aplicativo principal, configure os cabeçalhos HTTP de CORS corretos. Isso permite que seu aplicativo acesse com segurança os arquivos do modelo do outro domínio.
Atributo HTML:
  • <gmp-model-3d src="url"></gmp-model-3d>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface Model3DElementOptions

Interface google.maps.maps3d.Model3DElementOptions

Objeto Model3DElementOptions usado para definir as propriedades que podem ser definidas em um Model3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte Model3DElement.altitudeMode.
orientation optional
Consulte Model3DElement.orientation.
position optional
Consulte Model3DElement.position.
scale optional
Tipo:  number|Vector3D|Vector3DLiteral optional
Consulte Model3DElement.scale.
src optional
Tipo:  string|URL optional
Consulte Model3DElement.src.

Classe Model3DInteractiveElement

Classe google.maps.maps3d.Model3DInteractiveElement

Um modelo 3D que permite a renderização de modelos gLTF. Observe que position e src precisam ser definidos para que Model3DElement seja exibido.

As propriedades principais do gLTF PBR precisam ser compatíveis. No momento, não há suporte para extensões ou propriedades de extensão.

Ao contrário de Model3DElement, Model3DInteractiveElement recebe um evento gmp-click.

Elemento personalizado:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

Essa classe estende Model3DElement.

Essa classe implementa Model3DInteractiveElementOptions.

Acesse ligando para const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parâmetros: 
Cria um Model3DInteractiveElement com as opções especificadas.
Herdado: altitudeMode, orientation, position, scale, src
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
Esse evento é acionado quando o elemento Model3DInteractiveElement é clicado.

Interface Model3DInteractiveElementOptions

Interface google.maps.maps3d.Model3DInteractiveElementOptions

Objeto Model3DInteractiveElementOptions usado para definir as propriedades que podem ser definidas em um Model3DInteractiveElement.

Essa interface estende Model3DElementOptions.

Herdado: altitudeMode, orientation, position, scale, src

Classe Polyline3DElement

Classe google.maps.maps3d.Polyline3DElement

Uma polilinha 3D é uma sobreposição linear de segmentos de linha conectados em um mapa 3D.

Elemento personalizado:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Essa classe estende HTMLElement.

Essa classe implementa Polyline3DElementOptions.

Acesse ligando para const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Parâmetros: 
Cria um Polyline3DElement com as opções especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Padrão: AltitudeMode.CLAMP_TO_GROUND
Especifica como os componentes de altitude nas coordenadas são interpretados.
Atributo HTML:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
Tipo:  boolean optional
Padrão: false
Especifica se as partes da polilinha que podem ser obstruídas são desenhadas ou não. As polilinhas podem ser ocultadas pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
Padrão: false
Especifica se a polilinha deve ser conectada ao chão. Para extrudar uma polilinha, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:  boolean optional
Padrão: false
Quando true, as bordas da polilinha são interpretadas como geodésicas e seguem a curvatura da Terra. Quando false, as bordas da polilinha são renderizadas como linhas retas no espaço da tela.
Atributo HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Tipo:  string optional
A cor externa. Todas as cores CSS3 são permitidas.
Atributo HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Tipo:  number optional
A largura externa está entre 0.0 e 1.0. É uma porcentagem do strokeWidth.
Atributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
A sequência ordenada de coordenadas da polilinha. A altitude é ignorada em determinados modos e, portanto, é opcional.
Atributo HTML:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Tipo:  string optional
A cor do traço. Todas as cores CSS3 são permitidas.
Atributo HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Tipo:  number optional
A largura do traço em pixels.
Atributo HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Tipo:  number optional
O zIndex comparado a outras polilinhas/polígonos.
Atributo HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
A sequência ordenada de coordenadas da polilinha. A altitude é ignorada em determinados modos e, portanto, é opcional.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface Polyline3DElementOptions

Interface google.maps.maps3d.Polyline3DElementOptions

Objeto Polyline3DElementOptions usado para definir as propriedades que podem ser definidas em um Polyline3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte Polyline3DElement.altitudeMode.
coordinates optional
Consulte Polyline3DElement.coordinates.
drawsOccludedSegments optional
Tipo:  boolean optional
Consulte Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Consulte Polyline3DElement.extruded.
geodesic optional
Tipo:  boolean optional
Consulte Polyline3DElement.geodesic.
outerColor optional
Tipo:  string optional
Consulte Polyline3DElement.outerColor.
outerWidth optional
Tipo:  number optional
Consulte Polyline3DElement.outerWidth.
strokeColor optional
Tipo:  string optional
Consulte Polyline3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Consulte Polyline3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulte Polyline3DElement.zIndex.

Classe Polyline3DInteractiveElement

Classe google.maps.maps3d.Polyline3DInteractiveElement

Uma polilinha 3D é uma sobreposição linear de segmentos de linha conectados em um mapa 3D. Ao contrário de Polyline3DElement, Polyline3DInteractiveElement recebe um evento gmp-click.

Elemento personalizado:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

Essa classe estende Polyline3DElement.

Essa classe implementa Polyline3DInteractiveElementOptions.

Acesse ligando para const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parâmetros: 
Cria um Polyline3DInteractiveElement com as opções especificadas.
Herdado: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
  • clickEvent:  LocationClickEvent O objeto de evento vai conter o local de latitude, longitude e altitude do clique.
Esse evento é acionado quando o elemento Polyline3DInteractiveElement é clicado.

Interface Polyline3DInteractiveElementOptions

Interface google.maps.maps3d.Polyline3DInteractiveElementOptions

Objeto Polyline3DInteractiveElementOptions usado para definir as propriedades que podem ser definidas em um Polyline3DInteractiveElement.

Essa interface estende Polyline3DElementOptions.

Herdado: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Classe Polygon3DElement

Classe google.maps.maps3d.Polygon3DElement

Um polígono 3D (como uma polilinha 3D) define uma série de coordenadas conectadas em uma sequência ordenada. Além disso, os polígonos formam um loop fechado e definem uma região preenchida.

Elemento personalizado:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Essa classe estende HTMLElement.

Essa classe implementa Polygon3DElementOptions.

Acesse ligando para const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Parâmetros: 
Cria um Polygon3DElement com as opções especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Padrão: AltitudeMode.CLAMP_TO_GROUND
Especifica como os componentes de altitude nas coordenadas são interpretados.
Atributo HTML:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Tipo:  boolean optional
Padrão: false
Especifica se as partes do polígono que podem ser obstruídas são desenhadas ou não. Os polígonos podem ser ocultados pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:  boolean optional
Padrão: false
Especifica se o polígono deve ser conectado ao chão. Para extrudar um polígono, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Tipo:  string optional
cor de preenchimento. Todas as cores CSS3 são permitidas.
Atributo HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Tipo:  boolean optional
Padrão: false
Quando true, as bordas do polígono são interpretadas como geodésicas e seguem a curvatura da Terra. Quando false, as bordas do polígono são renderizadas como linhas retas no espaço da tela.
Atributo HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
A sequência ordenada de coordenadas que designam um loop fechado. Ao contrário das polilinhas, um polígono pode consistir em um ou mais caminhos, que criam vários recortes dentro dele.
path
A sequência ordenada de coordenadas que designam um loop fechado. A altitude é ignorada em determinados modos e, portanto, é opcional.
Atributo HTML:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Tipo:  string optional
A cor do traço. Todas as cores CSS3 são permitidas.
Atributo HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Tipo:  number optional
A largura do traço em pixels.
Atributo HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Tipo:  number optional
O zIndex comparado a outras polilinhas/polígonos.
Atributo HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
A sequência ordenada de coordenadas que designam um loop fechado. A altitude é ignorada em determinados modos e, portanto, é opcional.
innerCoordinates
A sequência ordenada de coordenadas que designam um loop fechado. Ao contrário das polilinhas, um polígono pode consistir em um ou mais caminhos, que criam vários recortes dentro dele.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface Polygon3DElementOptions

Interface google.maps.maps3d.Polygon3DElementOptions

Objeto Polygon3DElementOptions usado para definir as propriedades que podem ser definidas em um Polygon3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Tipo:  boolean optional
Consulte Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Consulte Polygon3DElement.extruded.
fillColor optional
Tipo:  string optional
Consulte Polygon3DElement.fillColor.
geodesic optional
Tipo:  boolean optional
Consulte Polygon3DElement.geodesic.
innerCoordinates optional
Consulte Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consulte Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:  string optional
Consulte Polygon3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Consulte Polygon3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulte Polygon3DElement.zIndex.

Classe Polygon3DInteractiveElement

Classe google.maps.maps3d.Polygon3DInteractiveElement

Um polígono 3D (como uma polilinha 3D) define uma série de coordenadas conectadas em uma sequência ordenada. Além disso, os polígonos formam um loop fechado e definem uma região preenchida. Ao contrário de Polygon3DElement, Polygon3DInteractiveElement recebe um evento gmp-click.

Elemento personalizado:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

Essa classe estende Polygon3DElement.

Essa classe implementa Polygon3DInteractiveElementOptions.

Acesse ligando para const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parâmetros: 
Cria um Polygon3DInteractiveElement com as opções especificadas.
Herdado: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
  • clickEvent:  LocationClickEvent O objeto de evento vai conter o local de latitude, longitude e altitude do clique.
Esse evento é acionado quando o elemento Polygon3DInteractiveElement é clicado.

Interface Polygon3DInteractiveElementOptions

Interface google.maps.maps3d.Polygon3DInteractiveElementOptions

Objeto Polygon3DInteractiveElementOptions usado para definir as propriedades que podem ser definidas em um Polygon3DInteractiveElement.

Essa interface estende Polygon3DElementOptions.

Herdado: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

Classe PopoverElement

Classe google.maps.maps3d.PopoverElement

Um elemento HTML personalizado que renderiza um popover. Ele se parece com um balão e geralmente está conectado a um marcador.

Elemento personalizado:
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

Essa classe estende HTMLElement.

Essa classe implementa PopoverElementOptions.

Acesse ligando para const {PopoverElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
PopoverElement
PopoverElement([options])
Parâmetros: 
altitudeMode
Tipo:  AltitudeMode optional
Padrão: AltitudeMode.CLAMP_TO_GROUND
Especifica como o componente de altitude da posição é interpretado.
Atributo HTML:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
Tipo:  boolean optional
Padrão: false
Se definido como verdadeiro, desativa a movimentação do mapa para que o popover fique totalmente visível quando for aberto.
Atributo HTML:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Tipo:  boolean optional
Padrão: false
Especifica se esse popover deve ser "dispensado de forma leve" ou não. O comportamento de "dispensa leve" é semelhante à configuração do atributo popover="auto", que faz parte da API Popover do navegador.
Atributo HTML:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Tipo:  boolean optional
Padrão: false
Especifica se esse popover deve ser aberto ou não.
Atributo HTML:
  • <gmp-popover open></gmp-popover>
positionAnchor
A posição em que o popover será exibido. Se o popover estiver fixado em um marcador interativo, a posição do marcador será usada.
Atributo HTML:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Coloca o conteúdo com slot na seção principal do popover.
header
Coloca o conteúdo com slot na seção de cabeçalho do popover.
--gmp-popover-max-width
Largura máxima do popover, independentemente da largura do conteúdo.
--gmp-popover-min-width
Largura mínima do popover, independentemente da largura do conteúdo. Ao usar essa propriedade, é altamente recomendável definir um valor menor que a largura do mapa (em pixels).
--gmp-popover-pixel-offset-x
O deslocamento no eixo x, em pixels, da ponta do popover em relação ao ponto no mapa em que as coordenadas geográficas do popover estão ancoradas.
--gmp-popover-pixel-offset-y
O deslocamento no eixo y, em pixels, da ponta do popover em relação ao ponto no mapa em que as coordenadas geográficas do popover estão ancoradas.
background-color
A cor de fundo do popover. Consulte a documentação do background-color para mais detalhes. O popover de lugar padrão também é afetado por essa propriedade. Use classes CSS segmentadas ou estilos inline em popovers personalizados para evitar estilizar o popover de lugar padrão.
border-radius
O raio da borda do popover. Consulte a documentação do border-radius para mais detalhes. O popover de lugar padrão também é afetado por essa propriedade. Use classes CSS segmentadas ou estilos inline em popovers personalizados para evitar estilizar o popover de lugar padrão.
box-shadow
A sombra da caixa do popover. Consulte a documentação do box-shadow para mais detalhes. O popover de lugar padrão também é afetado por essa propriedade. Use classes CSS segmentadas ou estilos inline em popovers personalizados para evitar estilizar o popover de lugar padrão.
color-scheme
Indica em qual esquema de cores esse popover pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. Se não for especificado, o padrão será as preferências de esquema de cores do usuário.
padding
O padding do popover. Consulte a documentação do padding para mais detalhes. O popover de lugar padrão também é afetado por essa propriedade. Use classes CSS segmentadas ou estilos inline em popovers personalizados para evitar estilizar o popover de lugar padrão.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PopoverElementOptions

Interface google.maps.maps3d.PopoverElementOptions

Objeto PopoverElementOptions usado para definir as propriedades que podem ser definidas em um PopoverElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte PopoverElement.altitudeMode.
autoPanDisabled optional
Tipo:  boolean optional
Consulte PopoverElement.autoPanDisabled.
lightDismissDisabled optional
Tipo:  boolean optional
Consulte PopoverElement.lightDismissDisabled.
open optional
Tipo:  boolean optional
Consulte PopoverElement.open.
positionAnchor optional
Consulte PopoverElement.positionAnchor.

Constantes AltitudeMode

Constantes google.maps.maps3d.AltitudeMode

Especifica como os componentes de altitude nas coordenadas são interpretados.

Acesse ligando para const {AltitudeMode} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
ABSOLUTE Permite expressar objetos em relação ao nível médio do mar. Isso também significa que, se o nível de detalhe do terreno mudar abaixo do objeto, a posição absoluta dele vai permanecer a mesma.
CLAMP_TO_GROUND Permite expressar objetos colocados no chão. Eles vão permanecer no nível do solo, seguindo o terreno, independentemente da altitude fornecida. Se o objeto estiver posicionado sobre um grande corpo d'água, ele será colocado no nível do mar.
RELATIVE_TO_GROUND Permite expressar objetos em relação à superfície do solo. Se o nível de detalhe do terreno mudar, a posição do objeto vai permanecer constante em relação ao solo. Quando estiver sobre a água, a altitude será interpretada como um valor em metros acima do nível do mar.
RELATIVE_TO_MESH Permite expressar objetos em relação à superfície mais alta de solo + edifício + superfície da água. Quando estiver sobre a água, será a superfície da água. Quando estiver sobre o terreno, será a superfície do edifício (se houver) ou do solo (se não houver edifícios).