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 pelo modo de mapa.
- YOUR_API_KEY pela chave de API. Para mais informações, consulte Gerar chave de API.
- PARAMETERS com os parâmetros obrigatórios e opcionais para o mapa modo
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. Controlar 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
permite que determinadas partes do mapa sejam exibidas em tela cheia. - As propriedades
frameborder="0"
estyle="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çalhoReferer
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 mapas incorporados não são suportados com menos de 200 px em 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 vai 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 publicidade 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 vistas panorâmicas interativas do os locais designados.search
: mostra os resultados de uma pesquisa no mapa visível. na mesma região.
Modo place
O URL a seguir usa o modo de mapa place
para exibir um marcador de mapa 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 o local do marcador do 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" para
City+Hall,New+York,NY ou Plus Codes "849VCWC8+R9" para
849VCWC8%2BR9 . |
center |
Opcional | Define o centro da visualização de mapa. | Aceita valores de latitude e longitude separados por vírgulas. 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 de acordo com os dados do mapa
disponíveis no local selecionado. |
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ó é suportado para alguns blocos de países. se um idioma específico solicitado não for suportado para o conjunto de blocos, então o será usado o idioma padrão desse bloco. | |
region |
Opcional | Define as bordas e os rótulos apropriados para exibição, com base em sensibilidades geopolíticas. | 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
¢er=-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írgulas. 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 de acordo com os dados do mapa
disponíveis no local selecionado. |
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ó é suportado para alguns blocos de países. se um idioma específico solicitado não for suportado para o conjunto de blocos, então o será usado o idioma padrão desse bloco. | |
region |
Opcional | Define as bordas e os rótulos apropriados para exibição, com base em sensibilidades geopolíticas. | 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 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 é compatível com + e %20 .
ao escapar 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 final 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" para
City+Hall,New+York,NY ou Plus Codes "849VCWC8+R9" para
849VCWC8%2BR9 . |
waypoints |
Opcional | Especifica um ou mais locais intermediários para traçar rotas 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 meio 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 dá preferência a pedestres
caminhos e calçadas, quando disponíveis), bicycling (que
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írgulas. 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 de acordo com os dados do mapa
disponíveis no local selecionado. |
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ó é suportado para alguns blocos de países. se um idioma específico solicitado não for suportado para o conjunto de blocos, então o será usado o idioma padrão desse bloco. | |
region |
Opcional | Define as bordas e os rótulos apropriados para exibição, com base em sensibilidades geopolíticas. | 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 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 visão completa de 360 graus de um único
o 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
O modo streetview
fornece um visualizador que renderiza o resultado
panorama como uma esfera com uma câmera no centro. É possível manipular a câmera
para controlar o zoom e a orientação da câmera.
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 separadas por vírgula (46.414382,10.013988
). A API exibirá o panorama mais próximos deste local. Como as imagens do Street View são são atualizadas periodicamente, e as fotografias podem ser tiradas de imagens ligeiramente diferentes posições cada vez, é possível que seu local seja direcionado a um panorama quando as imagens são atualizadas.pano
é um ID de panorama específico. Se você especificarpano
, também é possível especificar umlocation
. O O valorlocation
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 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 a inclinação padrão de 0° é definida com base na posição da câmera quando em que a imagem foi capturada. Por isso, uma inclinação de 0° costuma acontecer, mas nem sempre, horizontal. Por exemplo, uma imagem tirada em uma colina provavelmente têm 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. Ela o padrão é 90°. Ao lidar com uma janela de visualização de tamanho fixo, visualização pode ser considerada o nível de zoom, com números menores indicando uma 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írgulas. 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 de acordo com os dados do mapa
disponíveis no local selecionado. |
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ó é suportado para alguns blocos de países. se um idioma específico solicitado não for suportado para o conjunto de blocos, então o será usado o idioma padrão desse bloco. | |
region |
Opcional | Define as bordas e os rótulos apropriados para exibição, com base em sensibilidades geopolíticas. | 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 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. | Isso 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írgulas. 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 de acordo com os dados do mapa
disponíveis no local selecionado. |
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ó é suportado para alguns blocos de países. se um idioma específico solicitado não for suportado para o conjunto de blocos, então o será usado o idioma padrão desse bloco. | |
region |
Opcional | Define as bordas e os rótulos apropriados para exibição, com base em sensibilidades geopolíticas. | 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. |
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 o seguinte URL parâmetros:
q
origin
destination
waypoints
Para usar um ID de lugar, primeiro adicione o prefixo place_id:
. O
código a seguir especifica a Prefeitura de Nova York como origem da rota.
solicitação: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
define um raio, especificado em metros, no qual pesquisar um panorama, centralizado na latitude e longitude indicadas. Valores válidos são números inteiros não negativos. O valor padrão é 50.O
source
limita as pesquisas do Street View às origens selecionadas. Os valores válidos são:default
usa as fontes padrão para o Street View. as pesquisas são não se limitando a fontes 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. Os panoramas externos pode não existir para o local especificado. Observe também que a pesquisa retorna panoramas nos quais é possível determinar se eles estão em ambientes internos ou ao ar livre. Por exemplo, PhotoSpheres não são retornados porque é desconhecido independentemente de estarem em ambientes fechados ou ao ar livre.