Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ative a Google Maps Embed API

Para começar, orientaremos você pelo Google Developers Console para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ative a Google Maps Embed API
  3. Criar chaves apropriadas
Continuar

Google Maps Embed API

Visão geral

A Google Maps Embed API permite que você insira um mapa interativo ou panorama do Street View no seu site com uma simples solicitação HTTP. Ele pode ser facilmente incorporado à sua página da web ou seu blogue ao definir o URL da Google Maps Embed API como atributo src de um iframe:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Um mapa criado para você

Cada visitante do seu site vê um mapa do Google Maps criado sob medida para ele. Se o usuário estiver conectado a uma Conta do Google, os dados de local salvos, além da localização de sua casa e seu local de trabalho , entre outros, são diretamente integrados ao mapa exibido. Isso também significa que as interações com o mapa, como marcar um local com estrela, são salvas para facilitar a visualização no Google Maps para computador ou dispositivos móveis.

Esses detalhes são específicos de cada usuário, não podendo ser visto pelos demais. Cada visitante vê um mapa exclusivo.

Fácil incorporação

É fácil adicionar os mapas da Google Maps Embed API à sua página da web — basta definir o URL gerado como o valor de um atributo src de um iframe. Controle o tamanho do mapa com os atributos height e width do iframe. Não é preciso usar JavaScript.

Sem limites de uso

Não existem limites de uso para a Google Maps Embed API. Você pode incorporar mapas ou panoramas do Street View a sites com alto volume de tráfego sem se preocupar com limites de uso nem limitações de consultas por segundo.

Anúncios no mapa

A Google Maps Embed API pode incluir anúncios em seus mapas. O formato e o conjunto de anúncios mostrados em qualquer mapa podem ser alterados sem aviso prévio.

Gerar o URL

O formato de um URL para uma solicitação da Google Maps Embed API é o seguinte:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Onde:

  • {MODE} é uma das seguintes opções: place, directions, search, view ou streetview.
  • {YOUR_API_KEY} é sua chave de API gratuita.
  • parameters inclui parâmetros opcionais e parâmetros específicos de modo.

Chave de API

Todas as solicitações para a Google Maps Embed API devem incluir uma chave de API gratuita como valor de um parâmetro key. Sua chave permite o monitoramento do uso das Maps APIs por parte do seu aplicativo e garante que o Google possa entrar em contato com você sobre o site ou aplicativo, se necessário.

Para começar a usar o Google Maps Embed API, clique no botão abaixo para ativá-lo automaticamente e obter uma chave de API.

Obter uma chave

Como alternativa, siga as etapas a seguir para obter uma chave de API:

  1. Acesse o Google API Console.
  2. Crie ou selecione um projeto.
  3. Clique em Continue para ativar a API.
  4. Na página Credentials, obtenha uma chave de API (e defina as restrições dela).
    Observação: Se você já tem uma chave de API irrestrita ou uma com restrições a navegador, use-a.
  5. Recomendamos proteger sua chave de API fazendo uso destas práticas recomendadas.


No Google API Console, você também pode buscar uma chave existente ou visualizar uma lista de APIs ativas.

Para saber mais sobre como usar o Google API Console, consulte a Ajuda do API Console.

Tipos de restrição da chave de API

As Google Maps APIs estão disponíveis para aplicativos Android e iOS, navegadores e via serviços Web HTTP. APIs de qualquer plataforma podem usar uma chave de API genérica (irrestrita). Você tem a opção de adicionar uma restrição (por exemplo, referenciador HTTP) à chave de API. Depois de aplicar a restrição, a chave só funcionará em plataformas compatíveis com esse tipo de restrição. Saiba mais sobre chaves e credenciais.

Modos do mapa

Existem quatro modos de mapa disponíveis para você. O modo é especificado no URL da solicitação.

Modo Place

O modo Place exibe um pino de mapa em um lugar ou endereço específico, como marcos, empresas, componentes geográficos ou cidades.

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

O parâmetro de URL a seguir é obrigatório:

  • q define o local a ser destacado no mapa. Ele aceita nomes de locais, endereços ou IDs de local. A string deve ter escape de URL. Isso significa que endereços como "City Hall, New York, NY" (Prefeitura, Nova York, NY) devem ser convertidos em City+Hall,New+York,NY. (A Google Maps Embed API permite + e %20 para escape de espaços.) IDs de local devem ser precedidos por place_id:.

Salvar com atributo

Um usuário conectado a uma conta do Google poderá salvar o local indicado pelo parâmetro q. Locais salvos poderão ser visualizados em outros mapas do Google Maps na web ou em dispositivos móveis. Por padrão, locais salvos de um mapa incorporado incluirão informações de atribuição para lembrar os usuários de onde estavam quando o local foi salvo. É possível personalizar essa atribuição com os seguintes parâmetros.

  • attribution_source atribui o local salvo ao seu site ou aplicativo. Você deve incluir um attribution_source antes de definir attribution_web_url ou attribution_ios_deep_link_id. São assumidos os valores padrão do caminho de URL da página na qual o mapa foi exibido, por exemplo: https://example.com/path/
  • attribution_web_url especifica um link para seu site. Se attribution_source não for especificado, attribution_web_url assumirá o valor padrão do URL no qual o mapa incorporado é exibido, por exemplo: https://example.com/path/page.html
  • attribution_ios_deep_link_id especifica um esquema de URL que fornece um link direto para um aplicativo iOS. Quando visualizado no Google Maps para iOS, o attribution_ios_deep_link_id será exibido no lugar do attribution_web_url.

O exemplo abaixo mostra um pino no Empress Hotel em Victoria, Colúmbia Britânica. O local salvo será atribuído à "Google Maps Embed API". A atribuição será exibida como um URL. O exemplo usa o esquema de URL do Google Maps para fornecer rotas de condução para os usuários do iOS.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Modo Directions

O modo Directions exibe o caminho entre dois ou mais pontos especificados no mapa, além da distância e do tempo de percurso.

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

Os seguintes parâmetros de URL são obrigatórios:

  • origin define o ponto de partida a partir do qual exibir a rota. O valor pode ser o nome de um lugar, um endereço ou um ID de local. A string deve ter escape de URL. Isso significa que endereços como "City Hall, New York, NY" (Prefeitura, Nova York, NY) devem ser convertidos em City+Hall,New+York,NY. (A Google Maps Embed API permite + e %20 para escape de espaços.) IDs de local devem ser precedidos por place_id:.
  • destination define o ponto de chegada da rota.

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

  • waypoints especifica um ou mais locais intermediários para fornecer orientações de rota entre a origem e o destino. É possível especificar vários pontos de referência usando o caractere de barra vertical (|) para separar lugares (por exemplo: Berlin,Germany|Paris,France). Você pode especificar até 20 pontos de referência. Cada pontos de referência pode ser o nome de um lugar, um endereço ou um ID de local.
  • mode define o modo de transporte. As opções são driving, walking (que dá preferência a vias para pedestres e calçadas, quando disponíveis), bicycling (que gera rotas por ciclovias e ruas preferenciais, quando disponíveis), transit ou flying. Se nenhum modo for especificado, a Google Maps Embed API mostrará um ou mais dos modos mais relevantes para a rota especificada.
  • avoid instrui o Google Maps a evitar tolls, ferries e/ou highways. Separe valores com o caractere de barra vertical (por exemplo: avoid=tolls|highways). Observe que essa ação não exclui rotas que incluam os componentes restritos; ela simplesmente direciona o resultado para rotas mais favoráveis.
  • units especifica unidades metric ou imperial ao exibir distâncias nos resultados. Se units não forem especificadas, o país de origin da consulta determinará as unidades usadas.

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

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

O parâmetro de URL a seguir é obrigatório:

  • q especifica o termo de pesquisa. Esse parâmetro pode incluir uma restrição geográfica, como in+Seattle ou near+98033.

Modo View

O modo View retorna um mapa sem marcadores nem rotas.

O exemplo abaixo usa 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

O parâmetro de URL a seguir é obrigatório:

  • center define o centro da janela do mapa e aceita uma latitude e uma longitude como valores separados por vírgula (-33.8569,151.2152).

Parâmetros opcionais

Os parâmetros opcionais a seguir podem ser usados com qualquer um dos modos de mapa listados acima.

  • center define o centro da exibição do mapa. Esse parâmetro aceita valores de latitude e longitude separados por vírgula (como 37.4218,-122.0840).

  • zoom define o nível de zoom inicial do mapa. Os valores aceitáveis vão 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 pode ser roadmap (o padrão) ou satellite e define o tipo de blocos de mapa a serem carregados.

  • language define o idioma usado para elementos da interface e para exibir os rótulos nos blocos de mapa. Observe que 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. Por padrão, os visitantes verão mapas em seus respectivos idiomas.

  • region define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Esse parâmetro aceita códigos de região especificados como um valor de ccTLD ("domínio de nível superior") de dois caracteres.

Parâmetros de ID de local

A Google Maps Embed API permite o uso de IDs de local em vez de nomes de locais ou endereços. IDs de local são uma maneira estável de identificar um local de forma exclusiva. Consulte a documentação da Google Places API para saber mais sobre como encontrar e usar IDs de local.

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

  • q

  • origin

  • destination

  • waypoints

Para usar um ID de local, primeiro adicione o prefixo place_id:. O código a seguir especifica "New York City Hall" (Prefeitura de Nova York) como origem da rota request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Modo Street View

A Google Maps Embed API permite que você exiba imagens do Street View no seu site ou blogue como panoramas interativos. O Google Street View fornece exibições panorâmicas de localizações designadas ao longo de sua área de cobertura. Fotosferas contribuídas por usuários, e coleções especiais do Street View também estão disponíveis.

Cada panorama do Street View oferece uma exibição de 360 graus de uma localização. Imagens contêm 360 graus de exibição horizontal (uma volta completa) e 180 graus de exibiçã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. Essa câmera pode ser manipulada para controlar o zoom e a orientação.

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 exibirá o panorama fotografado mais próximo dessa localização. Como as imagens do Street View são atualizadas periodicamente e as fotografias podem ser tiradas de posições ligeiramente diferentes cada vez, é possível que sua localização passe para um panorama quando as imagens forem atualizadas.

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

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

  • heading indica a direção da bússola da câmera em graus no sentido horário a partir do norte. Os valores aceitos vão de -180° a 360°.

  • pitch especifica o ângulo vertical da câmera. O pitch é especificado em graus, de -90° a 90°. Valores positivos inclinam a câmera para cima, enquanto valores negativos a inclinam para baixo. O valor padrão de inclinação de 0° é baseado 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 terá um valor padrão de inclinação não horizontal.

  • fov determina o campo de visão horizontal da imagem. O campo de visão é expressado em graus no intervalo de 10° a 100°. O valor padrão é 90°. Ao trabalhar com uma porta 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.

  • language define o idioma usado para elementos da interface e os rótulos. Por padrão, os visitantes verão elementos de interface nos respectivos idiomas.

  • region define as bordas e os rótulos apropriados a serem exibidos com base em limites geopolíticos. Esse parâmetro aceita códigos de região especificados como um valor de ccTLD (“domínio de nível superior”) de dois caracteres.

Incorporar o mapa

Para usar a Google Maps Embed API na sua página da web, defina o URL gerado como o valor do atributo src de um iframe. Controle o tamanho do mapa com os atributos height e width do iframe:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Dica: adicione allowfullscreen às propriedades do iframe para permitir que certas partes do mapa sejam exibidas em tela cheia. Dica: as propriedades frameborder="0" e style="border:0" removem a borda padrão do iframe em torno do mapa.

É possível redimensionar o iframe de acordo com a estrutura e o projeto do seu site, mas percebemos que os visitantes geralmente têm mais facilidade para interagir com mapas maiores. Observe que não é possível incorporar mapas com tamanho menor do que 200 pixels em qualquer dimensão.

Enviar comentários sobre…

Google Maps Embed API
Google Maps Embed API
Precisa de ajuda? Acesse nossa página de suporte.