Criando um mapa com pontos customizados no Google Maps

Neste tutorial vamos analisar o processo de criação de pontos customizados para uma marca imaginária, no Google Maps.


Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+. Todos os direitos reservados para Envato.

Link para artigo original:How to Add Branded Branch Locations to Google Maps
Autor do artigo original:Kezz Bracey
Link da Envato para o artigo traduzido:Como Adicionar Pontos Customizados no Google Maps

O plano

Nosso mapa vai contar com três pontos chave:

  1. Marcadores customizados para cada localização no mapa.
  2. O logo do cliente em uma posição fixa do mapa.
  3. Tema para o mapa para complementar o branding.

Neste tutorial, nosso cliente imaginário vai ser a “The Hobby Shoppe”, localizada em Melbourne na Austrália.


Criando o mapa base

Vamos começar criando um mapa básico com foco no centro de Melbourne. Depois de adicionarmos os pontos da marca nós vamos reavaliar o centro do mapa, mas por enquanto vamos começar buscando a latitude e longitude para apresentar o mapa da cidade.

Latitude e longitude iniciais

Para conseguir essas informações, acesse o Google Maps e procure por Melbourne, depois aplique um pouco de zoom até que áreas sem população não tenham visibilidade. Conforme você enquadra a posição do mapa, note que a URL é alterada de acordo com sua latitude, longitude e zoom. Quando enquadrar o mapa (pode ser da maneira que desejar), copie a URL, vamos utilizar ela posteriormente. Exemplo da URL:

https://www.google.com/maps/place/Melbourne+VIC/@-37.804627…

Após o simbolo @ na URL, note a existência de uma virgula, esta separa a latitude, longitude e o zoom: -37.8046274,144.972156,12z

O primeiro valor -37.8046274 representa a latitude, o segundo valor 144.972156 representa a longitude, e o valor 12z significa que o level do zoom está no nível 12. Agora nós vamos incluir esses valores no mapa básico.

Marcação básica

Crie um arquivo HTML em branco e cole o seguinte código:

<!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 }
      .wrap { max-width: 75em; min-height: 40em; height:100%; width:100%; margin: 0 auto; padding-top: 2.5%;}
      #map-canvas { height: 90%; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var centerPos = new google.maps.LatLng(-37.8046274,144.972156);
      var zoomLevel = 12;
      function initialize() {
        var mapOptions = {
          center: centerPos,
          zoom: zoomLevel
        };
        map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
  <div class="wrap">
    <div id="map-canvas"></div>
  </div>
  </body>
</html>

No código acima nós criamos um documento HTML incluindo uma div com o id map-canvas que é o elemento onde vai ser gerado o mapa. Também adicionamos algumas medidas básicas para posicionar a div map-canvas.


Por ultimo, carregamos o script da API do Google Maps:

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

e criamos uma função JavaScript para carregar o mapa e configurar algumas opções básicas disponíveis na API do Google Maps.

<script type="text/javascript">
  var map;
  var centerPos = new google.maps.LatLng(-37.8046274,144.972156);
  var zoomLevel = 12;
  function initialize() {
var mapOptions = {
      center: centerPos,
      zoom: zoomLevel
    };
    map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Nota: veja como os valores que extraímos da URL do Google Maps no começo do tutorial são utilizados nas variáveis centerPos e zoomLevel, que são utilizadas na array mapOptions. A variável centerPos utiliza uma virgula para separar os valores da latitude e longitude -37.8046274,144.972156, e a variável zoomLevel utiliza o valor 12.

Salve o arquivo HTML e execute o mesmo em seu navegador. Nosso exemplo por enquanto vai ficar parecido com a imagem abaixo:


Adicionando pontos de localização customizados

O próximo passo é encontrar a latitude e longitude para cada ponto customizado no mapa, assim podemos criar um marcador customizado para cada ponto. A maneira mais fácil de executar esta tarefa é buscar o endereço das marcações no próprio Google Maps e extrair de lá mesmo a latitude e longitude.

Buscando a latitude e longitude para cada ponto

Vamos voltar ao Google Maps e buscar o endereço de cada um dos pontos onde vamos criar marcações customizadas. Vamos supor que o cliente já nos forneceu o endereço de cada ponto, então basta buscar o endereço e confirmar o ponto no mapa. Clique com o botão direito do mouse no ponto do resultado e selecione a opção O que há aqui?.


Um pequeno popup vai surgir do lado esquerdo da tela, bem abaixo da barra de pesquisa com os detalhes da localização incluindo a latitude e longitude:


Adicionando localizações

Tome nota da latitude e longitude de todos os pontos que vamos adicionar no mapa. No caso do nosso exemplo “The Hobby Shoppe” nós temos sete localizações diferentes para criar pontos customizados. Para criar os pontos, adicionamos o seguinte código no fim da função de inicialização initialize(), após a linha map = new google.maps.Map...:

var locations = [
  ['First Shoppe', -37.808204, 144.855579],
  ['Second Shoppe', -37.675648, 145.026125],
  ['Third Shoppe', -37.816935, 144.966877],
  ['Fourth Shoppe', -37.818714, 145.036494],
  ['Fifth Shoppe', -37.793834, 144.987018],
  ['Sixth Shoppe', -37.737116, 144.998581],
  ['Seventh Shoppe', -37.765528, 144.922624]
];

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][0],
    map: map
  });
}

Neste bloco de código estamos criando uma array das localizações, com um nome, latitude e longitude de cada local. Interagimos com a array adicionando cada ponto customizado no mapa, com o titulo e demais informações apresentadas ao hover do mouse no ponto.

Seu mapa agora deve apresentar pontos como estes:


Mas espere, tem alguma coisa errada com a imagem. Nós criamos sete pontos mas apenas seis estão visiveis. Porque?

Isso está acontecendo porque o sétimo ponto está localizado em uma latitude e longitude fora dos limites do mapa que criamos no inicio, então precisamos ajustar a posição central do mapa.

Ajustando a posição central do mapa

Agora que temos todos as marcações no mapa nós podemos reavaliar a ponto inicial do mapa para garantir que todas as marcações estão visíveis ao carregar. Para fazer isso vamos adicionar um botão que ao ser clicado vai apresentar as coordenadas assim que encontrarmos o ponto inicial perfeito.

Adicione esse botão a sua página, em qualquer lugar da seção body:

<button onclick="console.log( 'Lat &amp;amp; Long: ' + map.getCenter().k + ',' + map.getCenter().A + ' Zoom: ' + map.getZoom() );">Get Map Co-ords</button>

Agora você pode se mover através do mapa e clicar no botão Get Map Co-ords quando encontrar o local ideal de partida.


A latitude, longitude e zoom da sua posição vão estar disponíveis no console do navegador, então certifique-se de que o console do Chrome Dev Tools ou o Firebug (fiefox) está aberto.


Atualize a informação de posição central do mapa com a nova latitude e longitude, faça o mesmo com o valor do zoom se o mesmo for alterado:

var mapOptions = {
  center: new google.maps.LatLng(-37.74723337588968,144.961341333252),
  zoom: 12
};

Salve e atualize o mapa, agora você deve visualizar os sete pontos no mapa. Quando você estiver satisfeito com a nova posição central podemos remover o código do botão Get Map Co-ords.

Adicionando marcadores customizados com imagem

Agora que temos todos os pontos visíveis no mapa vamos alterar a imagem que simboliza o marcador por uma imagem que representa a marca e o estilo do mapa. Toda imagem utilizada como marcador no mapa precisa ter o fundo transparente.


Coloque a imagem que você escolheu na pasta “images”, no mesmo local onde está o arquivo da página do mapa, depois adicione a seguinte variável logo abaixo da variável locations, que criamos anterioremente:

var image = 'images/shoppe_icon.png';

Depois adicione uma opção extra icon: image ao loop for que nós criamos anteriormente para agrupar os marcadores. Ao inserir essa variável as opções do Map Marker Generation determina que você quer substituir a imagem padrão do marcador por uma imagem customizada:

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][0],
    map: map,
    icon: image
  });
}

Dê uma olhada no mapa agora e ele deve estar apresentando pequenas casas em cada um dos sete pontos criados:


Adicionando o logo do cliente

Agora vamos adicionar o logo do cliente de uma forma que ele não mude de tamanho nem de lugar mesmo ao alterarmos a posição ou zoom do mapa.

Os únicos elementos UI do Google Maps que não se movem ao mover o mapa ou aumentar ou diminuir o zoom, são os controles de zoom, terreno e a opção do street view, além dos menus de pesquisa, mas utilizando API do Google Maps conseguimos executar o mesmo efeito sobre o logo da empresa. Também vamos ter um botão customizado para resetar o zoom e retornar ao centro do mapa. Essas funções somadas ao logo da empresa facilitam o uso do mapa.

Vamos começar adicionando a imagem do logo na mesma pasta onde adicionamos a imagem do marcador. Agora, adicione o seguinte código, logo após a função initialize():

function LogoControl(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundImage = 'url(images/logo.png)';
  controlUI.style.width = '600px';
  controlUI.style.height = '116px';
  controlUI.style.cursor = 'pointer';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(centerPos)
    map.setZoom(zoomLevel)
  });

}

Quando essa função for executada, vai ser criado um elemento com a medida 600×116, utilizando o logo como background. Também adicionamos um listener que reseta o zoom do mapa e retorna a posição central ao clicarmos no logo.

Depois, no fim da função initialize(), insira o seguinte código:

var logoControlDiv = document.createElement('div');
var logoControl = new LogoControl(logoControlDiv, map);

logoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);

Quando a função initialize() for executada ela vai acionar a função LogoControl() que nós criamos, que adicionar o output para os controles do mapa.

Seu mapa agora deve estar parecido com a imagem abaixo:


Colorindo o mapa

Para editar as cores do mapa nos recomendamos (e muito) utilizar a ferramenta Styled Map Wizard do Google, para ter um retorno em tempo real das alterações de estilo.


O menu Feature type apresenta algumas opções de elementos que estão disponíveis para edição. Eles são organizados do mais genérico ao mais especifico. No nível mais genérico você pode alterar todas as cores, o que afeta o mapa como um todo. Você também pode tratar os componentes de forma mais especifica como por exemplo a opção All > Transit > Station > Bus.

Com a Feature type selecionada você também pode fazer uma seleção no menu Element type, assim você consegue determinar se o estilo empregado para um componente deve influenciar as medidas ou a label (são os textos que aparecem flutuando para alguns componentes no mapa) do mesmo. Além disso você também pode customizar a cor das linhas que representam o mapa.

Tem duas áreas que precisamos levar em consideração ao trabalhar com cores nessa ferramenta; o painel Colour e o painel Hue. O painel Colour adiciona uma cor em hexcode direto nos elementos selecionados, enquanto no painel Hue você tem um range de cores, das mais claras para as mais escuras influenciadas pela cor original dos elementos.

Inicialmente recomendamos a utilização do painel Hue para os itens mais padrões do mapa, assim você garante uma certa uniformidade no esquema de cores.

Nosso mapa

Vamos começar buscando no assistente por “Melbourne” e depois posicionamos o mapa preview para apresentar aproximadamente a mesma área que configuramos para o nosso mapa.

Abaixo do menu Feature type no assistente, selecione All, e abaixo do menu Element type selecione Geometry. Depois, na opção Hue escolha uma cor próxima desta #ffa200. Por alguma razão você não consegue inserir direto o valor da cor nessa opção, então você vai precisar clicar e testar até chegar próximo da cor proposta. Depois marque a opção Invert lightness, ative a opção Saturation e altere o valor para 35, ative a opção Lightness e altere o valor para 50, e ative a opção Gamma e altere o valor para aproximadamente 1.3.

Essas opções devem ter colorido todo seu mapa como na imagem:


O seu mapa deve estar um pouco esquisito por enquanto porque estamos testando as cores para diferenciar os pontos do mapa. As partes mais claras do mapa nós vamos cobrir com uma cor mais amigável ao logo da marca.


Colorindo mais componentes no mapa

Agora que você aplicou o primeiro estilo, clique no botão Add no canto superior direito do painel Map Style. Ao clicar neste botão, é criado um segundo estilo com o nome “Style 1”, que possibilita a customização de estilos para os demais elementos do mapa.

Com o “Style 1” selecionado no painel Map Style e a opção All ainda selecionada no Feature type, clique na opção Labels na segunda lista do menu Element type. Marque a opção Hue e tente configurar o valor aproximado da cor para #ffa200. Feito isso, as labels devem se apresentar com outra coloração ao invés de apresentar um verde ou azul claro como na imagem acima.

Clique no botão Add no painel Map Style para criar outro estilo, e depois clique em Water na segunda lista no menu Feature type. Abaixo do menu Element type selecione Geometry. Marque a opção Color e insira o hexcode #8F9B98.

Estilos para o demais elementos

Agora você que já aprendeu como criar estilos para cada elemento, através dos menus Feature type e Element type, siga em frente e aplique os estilos abaixo para os elementos ainda não customizados:

  • Feature type: All
  • Element type: All > Labels > Text > Fill
  • Color: #f8ead0
  • Feature type: All
  • Element type: All > Labels > Text > Stroke
  • Color: #6a5035
  • Feature type: All > Landscape > Man made
  • Element type: All > Geometry
  • Color: #9f8053
  • Feature type: All > Landscape > Natural
  • Element type: All > Geometry
  • Color: #9c9743
  • Feature type: All > Point of interest
  • Element type: All > Geometry
  • Color: #ACA74C
  • Feature type: All > Road
  • Element type: All > Geometry > Fill
  • Color: #d3b681
  • Feature type: All > Road
  • Element type: All > Geometry > Stroke
  • Color: #644F34
  • Feature type: All > Road > Arterial
  • Element type: All > Geometry > Fill
  • Color: #c6a15e
  • Feature type: All > Road > Local
  • Element type: All > Geometry > Fill
  • Color: #b09061
  • Feature type: All
  • Element type: All > Labels > Text > Stroke
  • Color: #483521
  • Feature type: All > Transit > Line
  • Element type: All > Geometry
  • Color: #876b48
  • Feature type: All > Transit > Station
  • Element type: All > Geometry
  • Color: #a58557

Exportando o Map Styles

Após customizar todos os elementos, estamos prontos para exportar nossos estilos através do assistente para o nosso mapa. No painel Map Style clique no botão Show JSON. Uma janela vai apresentar uma array em JavaScript com algumas opções que representam nossa customização para o mapa.

Copie todo o texto apresentado na janela entre a abertura [ e fechamento ].

No começo da função initialize() adicione essa nova linha:

var styles = ;

Posicione o seu cursor antes do ; depois cole o código que você copiou do assistente. Deve acabar com algo do tipo:

var styles = [
  {
"elementType": "geometry",
    "stylers": [
      { "hue": "#ffa200" },
      { "invert_lightness": true },
      { "lightness": 50 },
      { "saturation": 35 },
      { "gamma": 1.31 }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "hue": "#ffa200" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#8F9B98" }
    ]
  },{
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#f8ead0" }
    ]
  },{
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#6a5035" }
    ]
  },{
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      { "color": "#9c9743" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      { "color": "#9f8053" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      { "color": "#ACA74C" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d3b681" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#644F34" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#c6a15e" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#b09061" }
    ]
  },{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      { "color": "#876b48" }
    ]
  },{
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      { "color": "#a58557" }
    ]
  }
];

E então, no fim da função initialize() adicone essas três linhas de código:

var styledMap = new google.maps.StyledMapType( styles, {name: "Styled Map"} );
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

Essas linhas de código determinam que sejam aplicados os estilos que extraimos e aplicamos no mapa através da API do Google Maps. Veja agora o mapa, ele deve estar com quase todos os estilos configurados de acordo com a proposta:


Para testar o exemplo que criamos, acesse o live demo disponível no GitHub.

Juntando as partes

Para dar um toque final vamos adicionar alguns efeitos ao elemento do mapa. Substitua o CSS id #map-canvas { ... } por este:

#map-canvas {
  height: 90%;
  border: 5px solid #33210f;
  -moz-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
  -webkit-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
  box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;
}

Você pode fazer coisas incríveis com o Google Maps além de criar apenas um embed básico. Neste tutorial nos exploramos apenas algumas funcionalidades da API do Google Maps – você encontra mais informações sobre API na documentação do Google Maps.

Tente criar exemplos com sua própria marca e elementos customizados. Comece tentando criar seus próprios elementos de controle e zoom do mapa (documentação para controle customizados), ou janelas que são exibidas quando um marcador é selecionado. Essas janelas podem apresentar informações como telefone e endereço (documentação para criar janelas com informações).

Dê uma chance as essas novas técnicas que aprendemos da próxima vez que um cliente te pedir para incluir o Google Maps em um site. Você pode até garantir um bonus!


  • Muito bom o post, parabéns por traduzir e contribuir para a comunidade!
    Estive no ano passado com problemas para adicionar mais que um item no mapa …..

    • Muito obrigado Cristofer, qualquer coisa estamos ai pra ajudar 🙂

  • Rosi Ciasi

    Minha Diretora me pediu para fazer um levantamento de todos os clientes que temos e sinalizar no Mapa do Brasil.. Alguém sabe como se faz ?

    • Olha, é simples. Ela apenas quer um ponto no mapa? Da pra fazer até com uma planilha do Excel. Se você seguir o tutorial você vai tirar de letra essa atividade.

  • Gabriel Amorim

    Ola, teria como você me explicar como eu faço para quando a pessoa clicar no marcador, ser direcionada para outra página/site ?

    • Não me lembro muito bem porque não utilizo a algum tempo esse recurso, mas se não me engano é proibido pelo google, pois você sai do maps ao clicar no item, e não é essa a intenção do marcador. Melhor confirmar na documentação. 🙂

  • Igor Meireles

    Cara, parabéns!
    Muito bem explicado, não tive nenhuma duvida.
    Bem completo.
    De novo, parabéns!

  • Igor Meireles

    Como eu faço pra abrir uma janela ao lado do marcador quando passar o mouse em cima?

  • Cleiner Faria

    Cara, Parabéns pelo seu tutorial, elevou o nível da minha aplicação em 100%, porém estou com um pequeno problema.
    A minha aplicação é em Access, e utilizou um formulário que abre a janela do navegador e mostra o mapa, porém estou recebendo erro de script, sempre que passo o mouse em cima de algum marcador do próprio mapa do google.
    Meu questionamento é: Existe algum comando que faça com que não apareçam os marcadores do google, aparecendo apenas os marcadores customizados por mim?

  • Joao

    Parabens otimo artigo, uma duvida caso eu trace uma rota entre dois pontos como irei fazer para colocar essas imagens? Vlw

  • Renato Formenton Filho

    Muito bom, parabéns e obrigado.

  • Excelente material, parabéns mesmo.

  • Fagner Sutel

    Como faço para abrir uma janela com a descrição do local “First Shoppe”, “Second Shoppe”?, tentei criar o listner dentro do laço como abaixo mas não funciona:

    for (i = 0; i < locations.length; i++) {

    marker = new google.maps.Marker({

    position: new google.maps.LatLng(locations[i][1], locations[i][2]),

    //title: locations[i][0],

    map: map,

    icon: image

    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

    return function() {

    infowindow.setContent(locations[i][0]);

    infowindow.open(map, marker);

    }

    })(marker, i));

    }

  • Muriacy Velasco Ventura Junior

    Alguém sabe como faço para as funções do Google Maps funcionarem? No modo apresentado não consegui abrir opções como “Como Chegar”… é possível?

  • Antonio Albuquerque

    Não consigo utilizar o código html quando coloco no visual studio. Porque isso acontece ?

  • Rafael Cunha

    Existe uma quantidade máxima de marcadores num mesmo mapa?

    • cara, faz um certo tempo que não utilizo essa API, mas com certeza se houver um limite, quem determina é API do Google Maps (só confirmar pela doc deles).

      • Rafael Cunha

        Valeu.. obrigado pelo retorno e parabéns pelo artigo.

  • Xeroq Rolmes

    Como faço pra colocar uma caixa de pesquisa pra pesquisar um endereço, e mostrar a marcação mais proxima desse endereço?

    • Ewerton Batista

      Cara tbm estou precisando disso, vc conseguiu colocar a caixa de pesquisa? Obrigado!!

  • Tiago Higino

    Como eu faço para colocar um marcador neste link que já possui a coordenadas?
    Consegui montar o link só com latitude e longitude, mas queria colocar um marcador no ponto exato da latitude e longitude fornecida. Tem algum parâmetro que coloco na URL pra fazer isso?
    Exemplo de link que já possuo:
    https://www.google.com.br/maps/@“latitude”,”longitude”