Programação / PHP

Consumo e personalização do Google Maps + Geocode via API

Nada mais atrativo na construção de sistemas com localização do que um mapa interativo e customizado, e nesta aula do UpInside play você vai aprender sobre o consumo e personalização do Google Maps + Geocode via API

Por Robson V. Leite

Publicado por Robson V. Leite
em 08/12/2017 às 13h21

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

No exemplo vimos como estruturar o mapa e suas interações usando JavaScript e jQuery, e como estamos vindo de aulas onde falamos de REST, quis representar isso aqui também ao consumir o geocode com PHP.

Com isso, temos uma integração para o front, e uma classe nativa para implementar tanto o front quanto no back.

No exemplo realizamos essas consultas de geocode em tempo real, mas lembre-se, seria bem melhor ter esses dados armazenados em seu banco para não gerar consultas excessivas na API…

...para isso você poderia já capturar esses dados no cadastro dos clientes, e apenas exibi-los no mapa depois, deixando sua aplicação mais ágil e responsiva.

Nosso repositório do GIT com os exemplos prontos você acessa aqui.

Você também pode consultar:

E agora que já entendemos esses conceitos. Bora pro código!

Preparando o campo para o Google Maps

O primeiro passo aqui é preparar o campo para instanciar o Google maps. E para isso precisamos de um pouco de HTML e CSS. No exemplo abaixo temos a uma personalização básica que vai…

...criar um container responsivo para o Google Maps, e ainda alguns botões personalizados para gerar as interações mais tarde.

CSS:

body{
padding: 30px 20%;
}

#map {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background-color: grey;
}

.locations{
display: block;
margin-top: 20px;
}

.locations_item{
display: inline-block;
font-size: 0.875em;
cursor: pointer;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
}

Veja que nesse exemplo estou usando o CSS inline e direto no arquivo do exemplo, mas por padrão sempre prefira criar seu estilo em um arquivo css separado da estrutura padrão do site.

E agora que temos o CSS, vamos montar o HTML que vai receber nosso Google Maps e interações com o Geocode:

HTML:

Aqui é beeem mais simples, precisamos apenas de 2 destinos para nossos exemplos. Como vimos no CSS termos um ID map e uma CLASSE locations com seus itens.

Fica assim:

//...
<div id="map"></div>
<div class="locations"></div>
//...

E claro que precisamos também da estrutura básica do HTML, incluir o CSS e montar o escopo do exemplo. Se quiser ter uma visão geral você pode baixar tudo aqui!

A classe PHP do Geocode

Bom, é hora de estruturar nossa classe. É com ela realizar as consultas, fizemos esse processo passo a passo no vídeo, e com a classe pronta chegamos a uma consulta simples que fica assim:

//...
require '../Source/Models/GoogleMaps.php';
$maps = new Source\Models\GoogleMaps;

$fpolis = clone $maps;
$fpolis->setAddress("Florianópolis");
echo "<span class='locations_item' data-location='{$fpolis->getAddress()}|{$fpolis->getLatLng()->lat}|{$fpolis->getLatLng()->lng}'>{$fpolis->getAddress()}</span>";
//...

Perceba a simplicidade disso. Informamos apenas o nome do local que queremos e executamos os métodos de nossa classe para receber o nome completo da localização e o mais importante, a latitude e longitude do local…

...dados esses que usamos para marcar os pontos no mapa. Se esses dados já estiverem no seu cadastro de usuários/empresas/locais você não precisará mais consultar sempre que criar um mapa, então pense nisso antes de implementar.

Na aula vimos mais 6 exemplos dessa consulta, e também vimos como consultar diversas localidades ao mesmo tempo!

Chamando o Google Maps

E agora que temos visual, localizações e interações, precisamos criar nosso mapa e criar os gatilhos para tais interações. E tudo isso fica no JavaScript.

Como disse, no exemplo da aula fizemos isso passo a passo, e vimos que precisamos tanto do jQuery quanto do script do próprio Google Maps. Para colocá los em produção só precisamos chamar os 2 assim:

<script src="jquery-3.2.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=SUA_KEY_AQUI"></script>

Atenção para o SEU_KEY_AQUI, você vai precisar dele para poder consumir a API do Google Maps e também o Geocode. O link para isso está aqui.

Marcadores e localização

Com tudo pronto, agora vamos criar nosso mapa, e para iniciar ele com alguns marcadores, vou definir 3 endereços que por padrão virão marcados. Eles ficam em um vetor com alguns parâmetros personalizados…

...que te permite trocar a imagem e o texto do balão de informação (infoWindow). Com isso você poderia colocar logos, fotos e qualquer ícone que sua imaginação permitir como um marcador.

Já no balão (infowindow) a pegada é entender que ele aceita HTML, e com isso CSS eee com isso você pode personalizar o conteúdo dele como quiser ;)

Localizações

Então nossas localizações ficam assim:

var locations = [
{
title: "Rua Huberto Rohden, 100<br>Fpolis/SC",
lat: -27.6720101,
lng: -48.5054769,
icon: 'images/loc.png'
},
{
title: "Avenida Pequeno Príncipe, 800<br>Fpolis/SC",
lat: -27.6763079,
lng: -48.5005945,
icon: 'images/loc.png'
},
{
title: "Avenida Campeche, 2600<br>Fpolis/SC",
lat: -27.6657834,
lng: -48.4809122,
icon: 'images/loc.png'
}
];

Pronto, temos aqui 3 endereços próximos, todos no bairro campeche em florianópolis. O primeiro endereço será usado como marcador principal, os outros farão minha área, e ainda quero calcular isso para dar zoom no mapa…

...mas cada coisa a seu tempo.

Inicializando o Google Maps

E o primeiro passo aqui é inicializar nosso Mapa. Como já temos os scripts prontos vamos iniciar o jQuery e então criar uma função para chamar o mapa.

Fica assim:

function getMap(locations) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: locations[0]
});
}

Isso significa que iniciamos o jQuery e criamos uma função getMap com o parâmetro locations. Ainda rastreamos um elemento ID map (que está em nosso HTML) para receber o view do mapa.

Agora só precisamos executar o mapa assim:

getMap(locations);

Pronto, nosso mapa está instanciado e pronto para receber nossa personalização. Vamos agora complementar essa função com alguns dagilhos de zoom que vão deixar a exibição das localizações responsivas.

Localizações responsivas

Assim que fechamos a var map vamos fazer todo esse processo de dinamizar o mapa e o zoom de acordo com os marcadores.

Nossa função completa fica assim:

function getMap(locations) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: locations[0]
});

//map center
var bounds = new google.maps.LatLngBounds();

//cria marcas
locations.map(function (location) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: location,
icon: location.icon,
map: map
});

locationInfo(marker, location.title);
bounds.extend(marker.position);
});

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 15 ? 15 : zoom);
}

Pronto, agora perceba que dentro de nossa função, usamos uma outra função chamada de locationInfo. Essa serve para criar os balões de informação quando clicarmos na localização.

InfoWindow ou Balões de informação

Para isso temos que criar uma função que adiciona um gatilho de clique e recebe os valores que já passamos em nossa getMap para gerar o conteúdo do balão.

Essa função fica assim:

function locationInfo(marker, content) {
var info = new google.maps.InfoWindow({
content: content
});

marker.addListener("click", function () {
info.open(marker.get('map'), marker);
});
}

E voilá, agora meu Google maps tem marcadores dinâmicos que podem ser clicados e que terão informações ricas e personalizadas de cada localidade.

Por fim, vamos gerar interações?

Marcando localizações de forma dinâmica

Essa interação nos permite trabalhar marcando localizações de forma dinâmica em nosso mapa. Como vimos temos uma DIV CLASS locations em nosso HTML, e temos também uma rotina PHP que busca os endereços e separa os parâmetros por pipe em um atributo data-location.

Tudo que precisamos é ler essas informações no PIPE e jogar para o mapa.

Na vídeo aula geramos essa interação tanto para uma localização quanto para múltiplas localizações. Se você já fez nosso curso jQuery Essentials vai achar isso muito simples e intuitivo…

...e claro, se é aluno do Club tem acesso tanto ao curso de jQuery quanto a aula deste artigo que mostra o passo a passo desta integração.

Então para marcar nossa localização faremos assim:

$(".locations_item").click(function () {
var location = $(this).attr("data-location");
var setLoc = location.split("|");
var newLoc = [
{
title: setLoc[0],
lat: parseFloat(setLoc[1]),
lng: parseFloat(setLoc[2]),
icon: "images/loc.png"
}
];
getMap(newLoc);
}

Perceba que eu criei um gatilho de clique, logo depois recuperamos o data-location e por fim quebramos os pipes para montar um vetor.

Montando o location dinamicamente

Depois disso montamos o location dinamicamente, e para finalizar demos o nome de newLoc e em seguida executamos a função do Google maps com esse parâmetro.

Pronto, seu mapa vai renderizar as novas localizações em tempo real e mostrar seu novo marcador.

Lembre-se que você pode baixar o exemplo completo desta aula no gitHub da UpInside, e nele ver também como marcar múltiplas localizações dinamicamente com o mesmo conceito visto aqui.

Espero que tenham curtido mais essa super aula do Play... Implemente, personalize e manda nos comentários o que achou do conteúdo e como ficaram seus exemplos.

Um forte abraço e nos vemos em breve, em mais um PLAY!

Compartilhe:

Em Programação:

Deixe seu comentário: