A Maps API do Google Maps é um recurso que permite exibir mapas em seu site ou aplicativo. Com ela, por exemplo, você pode exibir a localização do seu estabelecimento mais próximo, ou de seus outros estabelecimentos distribuídos pela cidade, por meio de marcadores que podem ser personalizados de acordo com a identidade da sua marca.
Há diversos tipos de Maps API e aqui falaremos especificamente sobre a API Maps JavaScript. Confira a seguir as recomendações para implementar um mapa com marcadores em seu site a partir desta API.
Baixe agora: Guia de APIs do Google Maps
APIs do Google Maps: o que são?
O Google Maps abrange um pacote de produtos divididos em Mapas, Rotas e Lugares (ou Maps, Routes e Places, em inglês), sendo que cada um deles contém uma coleção de APIs e SDKs, que são códigos pré-empacotados que podem ser utilizados em conjunto para criar aplicativos ou soluções web com mapas e dados de localização do Google.
As APIs do Google Maps funcionam como “blocos de construção” que podem ser explorados em conjunto para criar experiências e aplicações baseadas em localização. Por meio delas, as organizações podem desenvolver soluções internas, externas, soluções de rastreamento e outras.
Entenda as três categorias de APIs:
• Mapas: exibe informações em mapas estáticos ou dinâmicos por meio do Maps e do Street View e facilitar a navegação de clientes e usuários em sites ou aplicativos.
• Rotas: simplifica o cálculo do caminho mais eficiente para seu usuário, eliminando atrasos e reduzindo deslocamentos desnecessários.
• Lugares: facilita a descoberta de mais de 200 milhões de lugares mapeados (estabelecimentos, locais geográficos ou pontos de interesse) em uma área ou ponto definido de um mapa.
APIs de Mapas (Maps): como funcionam
As APIs da categoria Mapas (Maps) possibilitam a inserção de informações em mapas estáticos ou dinâmicos por meio do Maps e do Street View. Essas APIs ajudam clientes e usuários a navegarem em sites ou aplicativos por meio de recursos personalizados e interativos.
A API Maps JavaScript está inserida na categoria de APIs de Mapas, que possibilita a inserção de informações em mapas estáticos ou dinâmicos em sites e aplicativos, ajudando clientes e usuários a navegarem por meio de recursos personalizados e interativos. Leia mais sobre as APIs de Mapas aqui.
As APIs e SDKs do Maps são:
- Maps SDK para Android/iOS – usuários podem adicionar mapas com base nos dados do Google Maps para seus aplicativos. API lida automaticamente com acesso aos servidores do Google Maps, download de dados e exibição do mapa;
- Maps Static API – permite a incorporação da imagem do Maps no site sem precisar de JavaScript ou qualquer carregamento dinâmico da página.
- Maps JavaScript API – possibilita a customização do mapa com conteúdo e imagens próprias. O benefício é a construção de mapas do jeito que o cliente desejar.
- Street View API – permite a incorporação de um panorama ou miniatura do street view a uma página.
A Maps JavaScript API possibilita a customização do mapa com conteúdo e imagens próprias em sites ou apps. Inclui quatro tipos básicos de mapa (roteiro, satélite, híbrido e terreno, que podem ser estilizados usando camadas, controles, eventos e outros recursos.
Esta API permite a construção de mapas do jeito que você desejar que ele seja apresentado para o seu cliente. Você pode exibir conteúdos e imagens que importam para o seu negócio. Vamos ao exemplo: através da implementação da API Javascript no site, uma rede de fast food pode customizá-lo com identidade da marca indicando os pontos onde as lojas estão localizadas no mapa.
Leia mais: API de Mapa: o que é e por que pode ser importante para o seu negócio?
Como implementar a Maps JavaScript API em seu site?
Vale lembrar que é necessário ter familiaridade com a linguagem JavaScript para explorar esta API. Também é indispensável criar um projeto com uma conta de faturamento na Plataforma Google Maps e ativar a API Maps JavaScript.
Criando seu primeiro mapa com um marcador
Para adicionar um mapa do Google simples com um marcador a uma página da Web basta seguir os passos abaixo.
Passo 1: criar uma página HTML
Este é o código de uma página HTML básica da Web:
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
Esta é uma página básica, que contém um cabeçalho de três níveis (h3) e um único elemento div. Você pode adicionar o conteúdo que quiser à página da Web.
Quanto ao código: o código abaixo cria uma página HTML que consiste em um cabeçalho e um corpo.
<html>
<head>
</head>
<body>
</body>
</html>
Você pode adicionar um cabeçalho de três níveis acima do mapa usando o código abaixo.
<h3>My Google Maps Demo</h3>
Ele define uma área da página para seu mapa do Google.
<!--The div element for the map -->
<div id="map"></div>
Neste estágio do tutorial, div aparece como um bloco cinza, porque você ainda não adicionou um mapa. O código abaixo descreve o CSS que define o tamanho e a cor de div.
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
Acima, o elemento style configura o tamanho de div. Para que o mapa fique visível, a largura e a altura de div têm que ser maiores do que zero. Neste caso, div é configurado com uma altura de 400 pixels e uma largura de 100%, que ocupa toda a página da Web.
O carregador de inicialização prepara a API Maps JavaScript para o carregamento (nenhuma biblioteca é carregada até que importLibrary() seja chamado).
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY_HERE",
// Add other bootstrap parameters as needed, using camel case.
// Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
});
</script>
Passo 2: adicionar um mapa com um marcador
Agora, mostramos como carregar a API Maps JavaScript na sua página da Web e escrever seu próprio JavaScript que usa a API para adicionar um mapa com um marcador.
// Initialize and add the map
let map;
async function initMap(): Promise<void> {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
// The marker, positioned at Uluru
const marker = new AdvancedMarkerView({
map: map,
position: position,
title: 'Uluru'
});
}
initMap();
No código acima, as bibliotecas Map e AdvancedMarkerView são carregadas quando a função initMap() é chamada.
Quanto ao código abaixo, ele cria um objeto no mapa do Google e adiciona propriedades a ele, incluindo o centro e o nível de zoom.
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
Acima, new Map() cria um novo objeto no mapa do Google. A propriedade center informa à API onde centralizar o mapa. Saiba mais sobre como receber coordenadas de latitude/longitude ou converter um endereço em coordenadas geográficas.
A propriedade zoom especifica o nível de zoom do mapa. Zero é o nível mais baixo e mostra toda a Terra. Defina o valor mais alto para aumentar o zoom em resoluções mais altas.
Já o código abaixo coloca um marcador no mapa. A propriedade position define a posição dele.
// The marker, positioned at Uluru
const marker = new AdvancedMarkerView({
map: map,
position: position,
title: 'Uluru'
});
Passo 3: gerar uma chave de API
Aqui, explicamos como autenticar o app na API Maps JavaScript usando sua própria chave de API.
Siga estas etapas para gerar uma chave:
- Acesse o console do Google Cloud.
- Crie ou selecione um projeto.
- Clique em Continuar para ativar a API e os serviços relacionados.
- Na página Credenciais, gere uma chave de API e defina as restrições dela. Observação: você vai poder usar uma chave irrestrita ou com restrições a navegadores, se tiver uma.
- Para evitar roubo de cota e proteger sua chave, consulte Usar chaves de API.
- Ative o faturamento. Consulte Utilização e faturamento para mais informações.
- Copie todo o código desta página do tutorial para o editor de textos.
- Substitua o valor do parâmetro key no URL pela sua própria chave de API (que você acabou de copiar).
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY_HERE",
// Add other bootstrap parameters as needed, using camel case.
// Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
});
</script>
9. Salve o arquivo com um nome que termine com .html, como index.html.
10. Carregue o arquivo HTML, arrastando da área de trabalho para o navegador. Na maioria dos sistemas operacionais, você também pode clicar duas vezes no arquivo.
A Geoambiente, empresa com mais de 25 anos de experiência em inteligência de localização, também pode ajudar seu negócio a acompanhar a mudança de comportamento do consumidor e entregar encomendas e pedidos com mais agilidade e eficiência.
Somos parceiros premier do Google Cloud e revendedores oficial do Google Maps há mais de 10 anos. Oferecemos acesso a plataforma de Maps (e a todas as APIs e funcionalidades) e também desenvolvemos soluções integradas e personalizadas a partir das APIs, auxiliando organizações a saírem na frente diante da disparada do comércio eletrônico e do aumento exponencial de pedidos por delivery.
Jornalista especializada em tecnologia há mais de 10 anos, com atuação em veículos nacionais e internacionais. Atualmente, é mestranda em Sustentabilidade pela USP, onde pesquisa mudanças climáticas.
