Google Maps API V3 – como integrar o Maps em um projeto Web

Neste artigo eu pretendo apresentar como utilizar a API V3 do Google Maps para integrar mapas simples e complexos em uma pagina HTML.

Essa semana estava desenvolvendo um projeto e quando comecei a desenvolver a página de contato, me veio a idéia de integrar um mapa na pagina a fim de mostrar onde se encontravam as unidades da empresa do cliente e minha surpresa foi que após testar vários plugins para trazer o bendito mapa, o que me supriu a necessidade da forma mais simples possível foi a própria API do Maps em sua nova versão – V3. Neste artigo eu pretendo apresentar como utilizar a API V3 do Google Maps para integrar mapas simples e complexos em uma pagina HTML.


Primeiramente vou explicar a vocês o que aprendi ao tentar utilizar a API do próprio Maps ao invés de um plugin em jquery (um dos que tentei utilizar foi o maplaces) de terceiro.

  • Primeiro, todo plugin de terceiro de alguma forma faz conexão com a API do Maps, não necessariamente a mais atualizada, também não sei se a API anterior a esta foi desativada para uso, o que pode acarretar em utilizar um plugin de terceiro possivelmente desatualizado.
  • Segundo, utilizar diretamente a API do Maps é bem melhor para quem deseja entender como realmente as coisas funcionam e você tem um controle muito maior do que aquele plugin está exercendo em seu projeto.
  • E terceiro, você extrai relatório e algumas informações mais geeks como quantas vezes o plugin foi executado, de onde veio o acesso a ele, meio que um Analytics sobre uso da ferramenta.

Todos esses itens foram cruciais para a minha decisão de deixar de usar plugins de terceiros e partir diretamente para a API do próprio Google Maps, aproveitando ainda que a API não saiu faz muito tempo e que foi renovada após a ultima atualização do Maps que mudou completamente a forma como ele apresentado ao usuário. Com isso em mente, vamos ver como ela funciona. 😀

Introdução

Antes de mais nada, para utilizar a API você precisa ter uma conta no Google, o que acredito que qualquer desenvolvedor tenha, mas se for o caso contrário, qualquer Gmail serve.

Com a conta do Google, basta logar no Google Developers Cloud, neste link: https://code.google.com/apis/console

Esse é o painel onde você controla as API’s que você utiliza do Google, voce pode encarar esse console como um painel de controle para as ferramentas do Google (voltada para desenvolvedores, claro).

Na guia Services você abilita o uso de qualquer API que você desejar usar, conforme a imagem abaixo.

Google Maps API V3 - Introdução

Um pouco mais abaixo está a API do Google Maps e todas as suas vertentes, que seriam os derivados do serviço, como por exemplo a API para android, API do Places, vide imagem abaixo.

Google Maps API V3 - Introdução

Note que a opção da API V3 está ligada, o que garante que podemos utilizar todos os recursos disponibilizados na API. As informações ao lado direito são em relação ao limite de requisições da API por dia, dentro acima de 25.000 visualizações diárias você precisa pagar para que a API fique disponível.

Depois de habilitar a API do Maps, precisamos verificar qual o foi a API Key liberada para nosso login, na guia API Access no Console ele apresenta qual a Key devemos utilizar para que a API opere corretamente.

Google Maps API V3 - Introdução


O item API Key determina qual sua chave de utilização da API, o item Referers determina que dominio pode requisitar os dados da API. Para editar que dominios tem acesso a API, basta clicar no link Edit allowed referers.

Como utilizar

Com a sua Key configurada, vamos testar a integração dela com uma página web. Criei uma pasta no meu desktop chamado maps_test com arquivo html chamado index.html. Na própria pagina de introdução a API do maps, contamos com um exemplo pratico, conforme abaixo.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Conforme a própria documentação da API segue alguns pontos que devemos considerar:

  • a pagina de teste deve estar declarada em HTML5.
  • declaramos a API do Maps utilizando a tag script.
  • criamos uma div nomeada “map-canvas” para renderizar o mapa.
  • criamos um objeto em JavaScript para declarar as propriedades do mapa.
  • criamos um objeto em JavaScript chamado map para apontar a div que vai renderizar o mapa mediante as informações do objeto que declara as propriedades.
  • utilizamos um listener event para carregar o mapa após a página ser carregada.

Agora algumas dicas minhas após efetuar testes práticos de integração da API:

  • a div que estiver com o id ou class “map-canvas” não estar envolvida em nenhuma outra classe ou id.
  • a div “map-canvas” também não pode ser utilizada dentro de outra div que contenha um um estilo de terceiros, como por exemplo no projeto em que estava trabalhando, onde tentei incluir o mapa em uma div “col-lg-6”, que é um estilo para grid no Bootstrap.
  • a unica forma de utilizar a API é declarando uma div sozinha com identificação “map-canvas”, lembre-se, ela não pode ter relação com nenhuma div e nenhum estilo de terceiro.
  • você pode declarar os estilos CSS e os scripts em JavaScript no seu arquivo padrão de estilos dentro do seu projeto.
  • Note que com o estilo especificado no exemplo, o mapa se torna responsivo.

Com essas informações em mente basta declarar as funções JavaScript e CSS em seu projeto e adicionar uma div no body com identificação (id ou class, vai depender de como está declarado seu código CSS).

Considerações sobre o script

Carregando a API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

Este script no inicio da pagina é o responsável por trazer as funcionalidades da API.

Note a linha src=”https://maps.googleapis.com/maps/api/js?key=(API_KEY)&sensor=SET_TO_TRUE_OR_FALSE, onde você precisa substituir a API_KEY pelo código oferecido ao seu login no Google Developers e o SET_TO_TRUE_OR_FALSE para true ou false (em letras minusculas).

HTTP e HTTPS

Note que no endereço onde o script busca os arquivos da API, temos como determinar se será utilizado o protocolo HTTP ou HTTPS. O HTTPS é definido como padrão por proporcionar segurança, mas o que vai determinar o uso de um deles é o foco do projeto em questão, caso o mesmo envolva dados particulares o recomendado é o HTTPS, por exemplo.

Opções do mapa

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};

Considere o script acima para informar a API que ponto do mapa deve ser apresentado, em latitude e longitude, e qual o nível do zoom neste ponto. A definição center informa que o mapa deve centralizar o ponto informado ao apresentar o mapa.

O próprio Maps mostra qual a latitude e longitude de um local mediante pesquisa, para quem deseja alterar o padrão e colocar um local de preferência.

 Objeto Map

var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);


O item getElementById nesta linha vai determinar o nome que a API vai buscar para renderizar o mapa, no caso o ID ou CLASS que for atribuída a DIV que vai apresentar o mesmo nome de identificação.

CSS

<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}</style>

Por padrão, o recomendado é que o elemento buscado pelo script da API no exmplo acima seja declarado no arquivo CSS como ID ao invés de uma CLASS.

O estilo acima é o padrão utilizado no teste, com esse estilo o mapa renderizado assume a responsividade de se apresentar em qualquer tamanho de tela sem que isso atrapalhe sua utilização.

Ferramenta para auxilio – Update

Galera, rodando na web encontrei esta ferramenta que auxilia a criação de mapas através da nova API do Google Maps. Basta inserir os dados necessários conforme solicitado ao lado esquerdo da ferramenta e gerar o código como desejar.

Google Map Builder by MyNameIsDonald - Build a Google Map for your website in just a few clicks

http://googlemapbuilder.mynameisdonald.com/

Conclusão

Com todas essas informações em mente você já consegue utilizar a API e se aprofundar na mesma para utilizar recursos mais bacanas como apontar pontos customizados no mapa, definir rotas, basicamente executar todas as funcionalidades disponiveis para utilização do usuário no próprio Maps.

Qualquer duvida estou a disposição via comentários 🙂


  • Diego Lima

    Excelente post meu amigo, informações preciosas, ontem recebi uma missão na empresa que trabalho, os caras querem um mapa igual a esse: http://smartz.com.br/unidades será que é possível?

  • R.w

    Legal.

    Tem alguma forma de fazer uma busca em HTML/JS para buscar algum local, ou até mesmo uma determinada linha de ônibus?

    Obrigado por compartilhar conhecimento.

    • Ola RW, bom dia. Tem sim, da pra fazer muita coisa com essa API do Maps, mas aconselho a dar uma olhada nos tutoriais de intrudução da propria API. Uma dica, testa as funcionalidades dele com o Polymer (do google também). Com o Maps + Polymer da pra criar mapas com pontos persolizados indicados nas tabelas de uma planilha do google drive.

  • Carlos Alberto

    Muito bom o tutorial!!

    Será que tem como eu pegar só a lista de estabelecimentos, sem montar o mapa?

    • Olá Carlos! tem sim, acho que o próprio maps ta a opção de exportar, se não tem como puxar pela API e salvar em um spreadsheet (excel do google). Qualquer coisa da um toque que me aprofundo aqui nas soluções 🙂

  • Anderson Braga Rodrigues

    Olá Thierry, muito bom essa sua iniciativa de trabalhar com google maps api, me encontro em uma situação que preciso lidar com o google maps mas puxando dados de uma Base de Dados própria, você poderia me indicar alguma solução? Forte Abraço

    • Olá Anderson!
      Aconselho o Polymer do próprio Google! Da uma olhada! 🙂
      Mais pra frente vou fazer um tutorial utilizando o maps e ele.

  • Genis Lopes

    Boa tarde, tenho interesse em desenvolver um aplicativo android que gere mapas apartir de dados inseridos, teria em me ajudar a desenvolve-lo em parceria, pois só tenho as ideias e aplicação do mesmo, não sei programar, g23_pelotas@hotmail.com

  • Kayke Quadros

    Thierry, muito esclarecedor o tutorial! Obrigado!

    Gostaria de te pedir ajuda com um caso específico. Não sou programador e um amigo pediu pra eu fazer uma alteração em um site que não programei. Acessei os arquivos via FTP para editar. A página que preciso editar é a que contem o mapa do google, com as informações dos locais. Preciso inserir novas lojas no mapa, mas não achei em nenhum arquivo dos códigos do site aonde editar isso.

    No código fonte para essa parte do site tem o seguinte:

    div class=”container-fluid locator”>

    E nada mais. Não consigo acessar a parte que modifica as informações em si.

    A página é a seguinte: http://mundodascoxinhas.com.br/lojas

    Se puder apenas me dar uma luz sobre aonde eu conseguiria editar essas infos do mapa, seria bom demais! De qualquer forma, te agradeço imensamente.

    Kayke