Google Maps API sem dor com gmaps.js


Google Maps API sem dor com gmaps.js

De um modo simples e conciso o gmaps.js permite a utilizar todo o potencial do Google Maps de forma abstraída sem ter a necessidade de ler e entender uma grandes porções de código ou documentação oficial. Veja nesse post como utilizar os comandos básicos para a implementação de mapas do Google utilizando a biblioteca gmaps.js com javascript.

Antes de qualquer coisa é necessário incluir ao seu fonte o código gmaps.js acessando seu repositório disponível atualmente neste link.

IMPORTANTE: Para a utilização do Google Maps API é exigido que a ela seja chamada com uma autenticação em formato de chave que pode ser obtido através deste link.

<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE">

Inicializando um mapa

Este é comando básico com os parâmetros obrigatórios para a criação de um mapa onde é necessário passar o ID do container desejado e as coordenadas que você pode capturar com outra função que será abordada mais à frente:

new GMaps({
    el: '#map',
    lat: -55,21562621,
    lng: -75,21255668,
  });

É interessante atribuir este objeto GMaps à uma variável possibilitando manipulá-lo posteriormente, visto através deste exemplo:

var mapObj = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333,
    zoom: 4,
    width: 600,
    height: 400
  });

Utilizei outros parâmetros possíveis para fins de personalização.

Adicionando marcadores ao mapa

De forma simples podemos adicionar marcadores utilizando a função addMarker() passando os parâmetro obrigatórios de latitude e longitude como exemplificado no exemplo abaixo:

mapObj.addMarker({
     lat: -14.043333,
    lng: -72.028333,
    title: 'Nome do marcador',
      click: function(e) {
            alert('Você clicou nesse marcador!');
      }
});

É possível também adicionar uma caixa de informações para ser exibida quando clicado no marcador adicionando este parâmetro:

infoWindow: {
    content: '<p>Conteúdo em HTML</p>'
}

Utilizando Geolocalização

A geolocalização do Google Maps permite encontrar os valores de latitude e longitude de um endereço passado como referência.

Neste exemplo estamos centralizando nosso mapa já criado no exemplo anterior com um endereço passado por parâmetro e ao mesmo tempo adicionando um marcador no local.

Obs: Não precisamos utilizar o objeto do mapa para chamar esta função.

GMaps.geocode({
      address: “Rua Felizberto Soares, 55, Centro, Canela - RS, 95680-000, Brasil”,
      callback: function(results, status) {
        if (status == 'OK') {
              var latlng = results[0].geometry.location;
        mapObj.setCenter(latlng.lat(),latlng.lng()); // Função para centralizar
mapObj.setZoom(15); // Função para ajuste de zoom
              mapObj.addMarker({ // Função para adicionar o marcador
                    lat: latlng.lat(),
                    lng: latlng.lng()
              });
        }
        else {
              alert(“Endereço não encontrado”);
        }
      }
});

Dependendo da formatação utilizada no endereço a geolocalização pode não encontrar o local desejado, portanto procure passar com a seguinte ordem: rua, número, bairro, cidade - estado, CEP, país.

Criando um mapa estático

Mapas estáticos são extremamente importantes para criação de documentos, geração de PDFs, e arquivos para impressão em geral, pois eles retornam uma url que pode ser inserida em tag <img> do HTML com interior do mapa.

url = GMaps.staticMapURL({
  size: [720, 400],
  lat: -14.043333,
  lng: -78.057933
});
$('#img').attr('src', url).appendTo('#map');

Pronto! Com o Google Maps API você chegará onde quiser!

Google Maps

Depois que o site ficar pronto, você certamente precisará de visitas! Aparecer no Google te parece interessante? Certamente sim! Já ouviu falar do Google AdWords? Confira o artigo do blog da Orgânica sobre o assunto e saiba mais!

Se você gostou do post de hoje, compertilhe nas suas redes sociais e não deixe de assinar nosso blog!




Por
27/04/2017

Web developer, estudante de Ciência da Computação e Violoncelista.


Assine nosso blog

Não perca nenhuma novidade!

Assine nosso blog

Não perca nenhuma novidade!