Incorporação de mapas

Este guia mostra como incorporar um mapa interativo na sua página da Web.

Criar o URL da API Maps Embed

Este é um exemplo de URL que carrega a API Maps Embed:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Substitua:

  • MAP_MODE com o modo do mapa.
  • YOUR_API_KEY pela chave de API. Para mais informações, consulte Acessar a chave de API.
  • PARAMETERS com os parâmetros obrigatórios e opcionais para o mapa modo

Como adicionar o URL a um iframe

Para usar a API Maps Embed na sua página da Web, defina o URL que você criado como o valor do atributo src de um iframe. Controle o tamanho do mapa com os atributos height e width do iframe, por exemplo:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

O exemplo de iframe acima usa as propriedades adicionais:

  • A propriedade allowfullscreen para permitir que determinadas partes do mapa sejam exibidas em tela cheia.
  • As propriedades frameborder="0" e style="border:0" para remover o padrão borda do iframe ao redor do mapa.
  • A propriedade referrerpolicy="no-referrer-when-downgrade" para permitir que o navegador envie o URL completo como o cabeçalho Referer com a solicitação, de modo que o As restrições da chave de API podem funcionar corretamente.

É possível redimensionar o iframe de acordo com a estrutura e o design do seu site. mas os visitantes geralmente acham mais fácil interagir com mapas maiores. Observe que não é possível incorporar mapas com tamanho menor do que 200 px em qualquer dimensão.

Restrições da chave de API

Se o site de hospedagem tiver uma metatag referrer definida como no-referrer ou same-origin, o navegador não enviará o cabeçalho Referer ao Google. Isso pode causar a restrição da chave de API para rejeitar as solicitações. Para que a restrição funcione corretamente, adicione um referrerpolicy ao iframe, como no exemplo acima, para explicitamente permitir que cabeçalhos Referer sejam enviados ao Google.

Anúncios no mapa

A API Maps Embed pode incluir anúncios no mapa. O formato do anúncio e o conjunto de anúncios mostrado em qualquer mapa pode ser alterado sem aviso prévio.

Escolher modos de mapa

Você pode especificar um dos seguintes modos de mapa para usar no URL da solicitação:

  • place: mostra um alfinete no mapa de um lugar ou endereço específico. como um ponto de referência, empresa, elemento geográfico ou cidade.
  • view: retorna um mapa sem marcadores ou rotas.
  • directions: mostra o caminho entre dois ou mais. pontos especificados no mapa, bem como a distância e o tempo de viagem.
  • streetview: mostra visualizações panorâmicas interativas de locais designados.
  • search: mostra os resultados de uma pesquisa na região visível do mapa.

Modo place

O URL a seguir usa o modo de mapa place para mostrar um marcador na Torre Eiffel:

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Use os seguintes parâmetros:

Parâmetro Tipo Descrição Valores aceitos
q Obrigatório Define a localização do marcador no mapa. Nome, endereço, Plus Code ou ID de lugar com escape de URL. A API Maps Embed é compatível com + e %20. ao escapar de espaços. Por exemplo, converta "Prefeitura, Nova York, NY" em City+Hall,New+York,NY ou os códigos Plus "849VCWC8+R9" em 849VCWC8%2BR9.
center Opcional Define o centro da visualização de mapa. Aceita valores de latitude e longitude separados por vírgula. Por exemplo: 37.4218,-122.0840.
zoom Opcional Define o nível de zoom inicial do mapa. Valores que variam de 0 (o mundo inteiro) a 21 (edifícios individuais). O limite máximo pode variar dependendo dos dados de mapa disponíveis na localização selecionada.
maptype Opcional Define o tipo de blocos de mapa a serem carregados. roadmap (padrão) ou satellite
language Opcional Define o idioma a ser usado para elementos da interface do usuário e para a exibição de rótulos nos blocos de mapas. Por padrão, os visitantes visualizarão um mapa no próprio idioma de destino. Esse parâmetro só é permitido em alguns blocos de países. Se o idioma específico solicitado não for permitido em um determinado bloco de país, o idioma padrão será usado.
region Opcional Define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Aceita um código de região especificado como um código de dois caracteres (não numérico) mapeamento de subtag de região unicode para ccTLD familiar ("domínio de nível superior") valores de dois caracteres. Consulte a Plataforma Google Maps Detalhes da cobertura para as regiões com suporte.

Modo view

O exemplo a seguir usa o modo view e o parâmetro maptype opcional para exibir uma visualização de satélite do mapa:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Use os seguintes parâmetros:

Parâmetro Tipo Descrição Valores aceitos
center Obrigatório Define o centro da visualização de mapa. Aceita valores de latitude e longitude separados por vírgula. Por exemplo: 37.4218,-122.0840.
zoom Opcional Define o nível de zoom inicial do mapa. Valores que variam de 0 (o mundo inteiro) a 21 (edifícios individuais). O limite máximo pode variar dependendo dos dados de mapa disponíveis na localização selecionada.
maptype Opcional Define o tipo de blocos de mapa a serem carregados. roadmap (padrão) ou satellite
language Opcional Define o idioma a ser usado para elementos da interface do usuário e para a exibição de rótulos nos blocos de mapas. Por padrão, os visitantes visualizarão um mapa no próprio idioma de destino. Esse parâmetro só é permitido em alguns blocos de países. Se o idioma específico solicitado não for permitido em um determinado bloco de país, o idioma padrão será usado.
region Opcional Define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Aceita um código de região especificado como um mapeamento de subtag de região Unicode de dois caracteres (não numéricos) para valores de ccTLD familiares de dois caracteres. Consulte a Plataforma Google Maps Detalhes da cobertura para as regiões com suporte.

Modo directions

O exemplo a seguir usa o modo directions para mostrar o caminho entre Oslow e Telemark, Noruega, a distância e o tempo de viagem que evitam pedágios e rodovias.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Use os seguintes parâmetros:

Parâmetro Tipo Descrição Valores aceitos
origin Obrigatório Define o ponto de partida a partir do qual as rotas devem ser exibidas. Nome do lugar com escape de URL, endereço, código adicional, latitude/longitude coordenadas ou ID do lugar. A API Maps Embed oferece suporte a + e %20 para escape de espaços. Por exemplo, converta "Prefeitura, Nova York, NY" para City+Hall,New+York,NY ou Plus Codes "849VCWC8+R9" para 849VCWC8%2BR9.
destination Obrigatório Define o ponto de chegada da rota. Nome do lugar com escape de URL, endereço, código adicional, latitude/longitude coordenadas ou ID do lugar. A API Maps Embed é compatível com + e %20. ao escapar de espaços. Por exemplo, converta "Prefeitura, Nova York, NY" em City+Hall,New+York,NY ou os códigos Plus "849VCWC8+R9" em 849VCWC8%2BR9.
waypoints Opcional Especifica um ou mais lugares intermediários para fornecer orientações de rota entre a origem e o destino. Nome, endereço ou ID do lugar. Vários pontos de referência podem ser especificados usando a barra vertical (|) para lugares separados (por exemplo, Berlin,Germany|Paris,France). Você pode especificar até 20 waypoints.
mode Opcional Define o método de transporte. Se nenhum modo for especificado, A API Maps Embed mostra um ou mais dos modos mais relevantes para o trajeto especificado. driving, walking (que prefere vias e calçadas para pedestres, quando disponíveis), bicycling (que gera rotas por ciclovias e ruas preferenciais, quando disponíveis), transit ou flying.
avoid Opcional Especifica os recursos que devem ser evitados nas rotas. Isso não evitar trajetos que incluem os elementos restritos; isso influencia resultados para trajetos mais favoráveis. tolls, ferries e/ou highways. Separe diversos valores com o caractere de barra vertical (por exemplo: avoid=tolls|highways).
units Opcional Especifica o método de medição, métrica ou sistema imperial, ao exibir distâncias nos resultados. Se units não for especificado, o origin país da consulta determina as unidades a serem usadas. metric ou imperial
center Opcional Define o centro da visualização de mapa. Aceita valores de latitude e longitude separados por vírgula. Por exemplo: 37.4218,-122.0840.
zoom Opcional Define o nível de zoom inicial do mapa. Valores que variam de 0 (o mundo inteiro) a 21 (edifícios individuais). O limite máximo pode variar dependendo dos dados de mapa disponíveis na localização selecionada.
maptype Opcional Define o tipo de blocos de mapa a serem carregados. roadmap (padrão) ou satellite
language Opcional Define o idioma a ser usado para elementos da interface do usuário e para a exibição de rótulos nos blocos de mapas. Por padrão, os visitantes visualizarão um mapa no próprio idioma de destino. Esse parâmetro só é permitido em alguns blocos de países. Se o idioma específico solicitado não for permitido em um determinado bloco de país, o idioma padrão será usado.
region Opcional Define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Aceita um código de região especificado como um código de dois caracteres (não numérico) mapeamento de subtag de região unicode para ccTLD familiar ("domínio de nível superior") valores de dois caracteres. Consulte os detalhes da cobertura da Plataforma Google Maps para conferir as regiões com suporte.

Modo streetview

A API Maps Embed permite exibir imagens do Street View como panoramas interativos de locais designados em todo o área de cobertura. Usuário Contribuições com Photo Spheres Coleções especiais do Street View também estão disponíveis.

Cada panorama do Street View oferece uma visualização completa em 360 graus de um único local. As imagens contêm 360 graus de visualização horizontal (uma volta completa) e 180 graus de visualização vertical (de cima para baixo). O modo streetview fornece um visualizador que renderiza o panorama resultante como uma esfera com uma câmera no centro. É possível manipular a câmera para controlar o zoom e a orientação.

Veja o seguinte panorama do modo streetview:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Um dos seguintes parâmetros de URL é obrigatório:

  • location aceita uma latitude e uma longitude como valores separados por vírgula (46.414382,10.013988). A API vai mostrar o panorama fotografado mais próximo desse local. Como as imagens do Street View são atualizadas periodicamente e as fotografias podem ser tiradas de posições ligeiramente diferentes a cada vez, é possível que sua localização passe para um panorama diferente quando as imagens forem atualizadas.

  • pano é um ID de panorama específico. Se você especificar pano, também é possível especificar um location. O O valor location só será usado se a API não conseguir encontrar o panorama. ID.

Os seguintes parâmetros de URL são opcionais:

Parâmetro Tipo Descrição Valores aceitos
heading Opcional Indica a direção da bússola da câmera em graus no sentido horário a partir do norte. Valor em graus de -180° a 360°
pitch Opcional especifica o ângulo vertical da câmera. Valores positivos serão ângulos a câmera para cima, enquanto valores negativos a inclinam para baixo. O valor padrão de inclinação de 0° é definido com base na posição da câmera quando a imagem foi capturada. Por esse motivo, um valor de 0° para inclinação é, com frequência, mas não sempre, horizontal. Por exemplo, uma imagem capturada em uma colina provavelmente vai mostrar um valor padrão de inclinação não horizontal. Valor em graus de -90° a 90°
fov Opcional determina o campo de visão horizontal da imagem. O valor padrão é 90°. Ao trabalhar com uma janela de visualização de tamanho fixo, o campo de visão pode ser considerado o nível de zoom, com números menores indicando um nível maior de zoom. Valor em graus, com um intervalo de 10° a 100°
center Opcional Define o centro da visualização de mapa. Aceita valores de latitude e longitude separados por vírgula. Por exemplo: 37.4218,-122.0840.
zoom Opcional Define o nível de zoom inicial do mapa. Valores que variam de 0 (o mundo inteiro) a 21 (edifícios individuais). O limite máximo pode variar dependendo dos dados de mapa disponíveis na localização selecionada.
maptype Opcional Define o tipo de blocos de mapa a serem carregados. roadmap (padrão) ou satellite
language Opcional Define o idioma a ser usado para elementos da interface do usuário e para a exibição de rótulos nos blocos de mapas. Por padrão, os visitantes visualizarão um mapa no próprio idioma de destino. Esse parâmetro só é permitido em alguns blocos de países. Se o idioma específico solicitado não for permitido em um determinado bloco de país, o idioma padrão será usado.
region Opcional Define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Aceita um código de região especificado como um mapeamento de subtag de região Unicode de dois caracteres (não numéricos) para valores de ccTLD familiares de dois caracteres. Consulte a Plataforma Google Maps Detalhes da cobertura para as regiões com suporte.

Modo search

O modo Search mostra os resultados de uma pesquisa na região visível do mapa. É recomendável definir um local para a pesquisa, seja pelo incluir um local no termo de pesquisa (record+stores+in+Seattle) ou incluindo um parâmetro center e zoom para vincular a pesquisa.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Use os seguintes parâmetros:

Parâmetro Tipo Descrição Valores aceitos
q Obrigatório Define o termo de pesquisa. Ele pode incluir uma restrição geográfica, como in+Seattle ou near+98033.
center Opcional Define o centro da visualização de mapa. Aceita valores de latitude e longitude separados por vírgula. Por exemplo: 37.4218,-122.0840.
zoom Opcional Define o nível de zoom inicial do mapa. Valores que variam de 0 (o mundo inteiro) a 21 (edifícios individuais). O limite máximo pode variar dependendo dos dados de mapa disponíveis na localização selecionada.
maptype Opcional Define o tipo de blocos de mapa a serem carregados. roadmap (padrão) ou satellite
language Opcional Define o idioma a ser usado para elementos da interface do usuário e para a exibição de rótulos nos blocos de mapas. Por padrão, os visitantes visualizarão um mapa no próprio idioma de destino. Esse parâmetro só é permitido em alguns blocos de países. Se o idioma específico solicitado não for permitido em um determinado bloco de país, o idioma padrão será usado.
region Opcional Define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Aceita um código de região especificado como um mapeamento de subtag de região Unicode de dois caracteres (não numéricos) para valores de ccTLD familiares de dois caracteres. Consulte os detalhes da cobertura da Plataforma Google Maps para conferir as regiões com suporte.

Parâmetros de ID do lugar

A API Maps Embed permite usar IDs de lugar em vez de fornecer um nome ou endereço do lugar. IDs de lugares são uma forma estável de identificar um lugar. Para mais informações, consulte a documentação da API Google Places.

A API Maps Embed aceita IDs de lugar para os seguintes parâmetros de URL:

  • q
  • origin
  • destination
  • waypoints

Para usar um ID de lugar, primeiro adicione o prefixo place_id:. O código abaixo especifica a Prefeitura de Nova York como a origem de uma solicitação de indicações: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius: define um raio, em metros, para procurar um panorama, com o centro na latitude e longitude fornecidas. Os valores válidos são números inteiros não negativos. O valor padrão é 50.

  • source: limita as pesquisas do Street View a fontes selecionadas. Os valores válidos são:

    • default: usa as fontes padrão do Street View. As pesquisas não são limitadas a origens específicas.
    • outdoor: limita as pesquisas a coleções ao ar livre. Para local fechado coleções não são incluídas nos resultados da pesquisa. e pode ser que não existam panoramas externos para o local especificado. Além disso, a pesquisa só retorna panoramas em que é possível determinar se eles estão em ambientes internos ou externos. Por exemplo, PhotoSpheres não são retornados porque é desconhecido independentemente de estarem em ambientes fechados ou ao ar livre.