Insira um mapa interativo ou panorama do Street View na sua página da Web com uma simples solicitação HTTP, sem precisar de JavaScript.
Custos
Todas as solicitações da API Maps Embed estão disponíveis sem custos financeiros com uso ilimitado. No entanto, todas as solicitações ainda exigem uma chave de API do Google Cloud válida. Para mais informações, consulte Uso e faturamento.
Antes de começar
Para criar um mapa incorporado na sua página da Web, conclua as etapas de configuração necessárias clicando nas seguintes guias:
Etapa 1
Console
-
No console do Google Cloud, mais especificamente na página do seletor de projetos, clique em Criar projeto para elaborar um novo projeto do Cloud.
-
Verifique se o faturamento está ativado para seu projeto do Cloud. Confirme se o faturamento está ativado no projeto.
É possível testar o Google Cloud sem pagar nada. O teste expira em 90 dias ou quando a conta acumular US$ 300 em cobranças, o que ocorrer primeiro. É possível cancelar a qualquer momento. A Plataforma Google Maps disponibiliza um crédito mensal recorrente de US$ 200. Para mais informações, consulte Créditos da conta de faturamento e Faturamento.
SDK Cloud
gcloud projects create "PROJECT"
Saiba mais sobre o SDK Google Cloud, a instalação do SDK Cloud e os seguintes comandos:
Etapa 2
Para utilizar a Plataforma Google Maps, ative as APIs ou os SDKs que você planeja usar com seu projeto.
Console
SDK do Cloud
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
Saiba mais sobre o SDK Google Cloud, a instalação do SDK Cloud e os seguintes comandos:
Etapa 3
Essa etapa só passa pelo processo de criação da chave de API. Se você usa sua chave de API na produção, recomendamos restringi-la. Para mais informações, consulte a página Como usar chaves de API específica do produto.
A chave de API é um identificador exclusivo que autentica solicitações associadas ao seu projeto para fins de uso e faturamento. Você precisa ter pelo menos uma chave de API associada ao projeto.
Para criar uma chave de API, siga estas etapas:
Console
-
Acesse a página Plataforma Google Maps > Credenciais.
-
Na página Credenciais, clique em Criar credenciais > Chave de API.
A caixa de diálogo Chave de API criada exibirá sua chave recém-criada. -
Clique em Fechar.
A nova chave vai aparecer na página Credenciais, em Chaves de API.
Lembre-se de restringir a chave de API antes de usar na produção.
SDK Cloud
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
Saiba mais sobre o SDK Google Cloud, a instalação do SDK Cloud e os seguintes comandos:
Como gerar um iframe
Clique nas opções a seguir e adicione um local e uma chave de API para gerar um iFrame para sua página da Web. Para mais parâmetros e opções, consulte Inserir um mapa.
Como testar o iframe
Para ver o iframe em uma janela de navegador HTML:
- Abra o editor de texto padrão. Você precisa ter editores de texto, como TextEdit ou Microsoft Windows Notepad, instalados no dispositivo por padrão.
- Crie um arquivo HTML e nomeie-o como
index.html
. Adicione o código abaixo com o iframe gerado acima:
<html> <!-- Replace this code comment with your iframe. --> </html>
Salve o arquivo HTML
index.html
.Carregue o arquivo HTML em um navegador da Web arrastando-o da área de trabalho para o navegador. Você também pode clicar duas vezes no arquivo na maioria dos sistemas operacionais.
Parabéns! Você acabou de configurar e criar um mapa usando a API Maps Embed.
Limpar
Você pode excluir seu projeto do Google Cloud para interromper o faturamento de todos os recursos usados nesse projeto.
- No console do Google Cloud, acesse a página Gerenciar recursos:
- Se o projeto que você planeja excluir estiver anexado a uma organização, selecione e abra a lista de organizações na parte de cima da página.
- Na lista de projetos, selecione o que você quer excluir e clique em Excluir.
- Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluir o projeto.
Próximas etapas
Comece a desenvolver com a API Embed do Maps configurando seu projeto do Google Cloud:
Para uma lista de parâmetros e opções adicionais que podem ser adicionados ao iframe:
Estenda seu projeto do Maps com a API JavaScript: