Como usar a Maps API do Google Maps no site da sua empresa?

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 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:

1. Acesse o console do Google Cloud.
2. Crie ou selecione um projeto.
3. Clique em Continuar para ativar a API e os serviços relacionados.
4. 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.
5. Para evitar roubo de cota e proteger sua chave, consulte Usar chaves de API.
6. Ative o faturamento. Consulte Utilização e faturamento para mais informações.
7. Copie todo o código desta página do tutorial para o editor de textos.
8. 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.