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