Nesse post do começo de Maio, falei sobre como usar a API do Google Maps para colocar numa página um mapa que traça uma rota entre dois endereços.
Dando continuidade, usei aquele html como base para exemplificar como usar a API se você necessitar encontrar o endereço mais próximo de uma lista de endereços; no caso abaixo, o que fiz foi plotar na tela 3 endereços (usei como exemplo os endereços de 3 SESCs aqui da capital paulista) e, quando o usuário digitar um endereço e clicar no botão, um listener para o evento onclick do mesmo busca o endereço pela API do Google Maps, faz a comparação entre as coordenadas da latitude e longitude desse endereço com os 3 dos SESCs e, aquele que for mais perto, é usado para traçar um ponto-a-ponto.
Segue, abaixo, o código html totalmente funcional. Ele está todo comentado, e fala por si só; o funcionamento é simples. *aconselho uma lida no post ao qual me referi no começo do post, caso você não esteja familiarizado com a API do Google Maps
[update]parece que havia um problema em alguns browsers dependendo da configuração dele, com o charset utilizado (os endereços com acentuação não eram localizados). Alterei para UTF-8 e upei o html para download[/update]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Google Maps - encontrando o endereço mais próximo</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAM3tYiYBfOKmhuRiSYzXlxRSolT9dJHhqkNrIgFq9Znypr0iOlhQeBdhVvDQuPJy4hxdG187GklHLbA" type="text/javascript"></script> <script type="text/javascript"> var geocoder = new GClientGeocoder(); var map; var directionsPanel; var directions; var gdir = new GDirections(); var addr = new Array(3); var distances = new Array(3); window.onload = function() { //seta o país que será usado pela API geocoder.setBaseCountryCode("pt_BR"); map = new GMap2(document.getElementById(´map´), { size: new GSize(710,480) }) map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(-23.547779, -46.639366), 12); //centro da cidade de São Paulo //mostra o endereço de 3 Sescs no mapa showAddress("Sesc Paulista - São Paulo/SP", 1); showAddress("Rua Amador Bueno, 505 - São Paulo/SP", 2); //Sesc Santo Amaro showAddress("Rua Clélia, 93 - São Paulo/SP", 3); //Sesc Pompéia //ao clicar no botão do formulário, faz a busca document.getElementById("trace-route").onclick = function() { //tenta encontrar o endereço digitado pelo usuário geocoder.getLocations( document.getElementById("from").value, function(point) { //marca no mapa o endereço citado add_marker(point); //se existir o endereço que o usuário digitou... if(point.Placemark) { //cria objeto GLatLng e grava a latitude/longitude do endereço digitado pelo usuário, para uso futuro var b = new GLatLng(point.Placemark[0].Point.coordinates[1], point.Placemark[0].Point.coordinates[0]); /* variáveis que serão usadas para comparar distâncias entre coordenadas de latitude e longitude */ var smallestDist; var smallestDistId; //percorre lista dos 3 endereços do SESCs for(var i=0; i<3; i++) { var a = new GLatLng(addr[i][1], addr[i][0]); /* usa método da classe GLatLng() que retorna a distância, em metros, entre duas coordenadas de latitude/longitude */ var x = a.distanceFrom(b); //lógica para marcar qual a menor distância entre o endereço digitado e os 3 endereços dados if(x<smallestDist || i==0) { smallestDist = x; smallestDistId = i; } } /* cria um array de dois objetos GLatLng, com as coordenadas do endereço digitado pelo usuário e o endereço do ponto mais próximo a esse endereço */ var pointsArray = [new GLatLng(addr[smallestDistId][1], addr[smallestDistId][0]), b] directions = new GDirections(map); //instancia objetos //usa o array de pontos para traçar a rota entre os dois endereços (ou melhor, entre as duas coordenadas) directions.loadFromWaypoints(pointsArray, {"locale":"pt_BR"}); } } ); } } function showAddress(address, k) { geocoder.getLocations( address, function(point) { add_marker(point, k); } ); } function add_marker(response, k) { if(!response.Placemark) { return; } place = response.Placemark[0]; if(k) { //grava a latitude/longitude do endereço addr[k-1] = place.Point.coordinates; } point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); var marker = createMarker(point, place.address, k); map.addOverlay(marker); } function createMarker(point,html, k) { var marker = new GMarker(point, false); return marker; } </script> </head> <body> <div id="map"></div> <form action="#" method="POST"> <fieldset> <label for="from">ponto de partida:</label> <input type="text" name="from" id="from" /> </fieldset> <input type="button" class="button" id="trace-route" value="achar SESC mais próximo" /> </form> </body> </html>
Não está funcionando aqui…
Posso estar fazendo algo errado ou está desatualizado ?
Abraços