quinta-feira, 24 de junho de 2010

Busca CEP com google maps

Quando precisei de uma busca de cep para implementar em um cadastro encontrei diversas soluções, algumas pagas, mas nenhuma que atendia as minhas necessidades e claro, de fácil implementação.

O problema
No cadastro em questão era exigido o cep do cliente, o problema é que nem sempre o cliente sabe ou tem paciencia de buscar em outro site ou até mesmo em uma conta de luz por exemplo, esse tipo de dificuldade pode fazer com que o cliente dexista do cadastro.

Solucao Implementada

Segue uma solução simples usando a API http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/v2/basics.html do Google Maps e flamework javascript Mootools (você pode usar qualquer outro ou nenhum flamework se assim desejar)

HTML

<input type="text" name="consulta" id="consulta"/>
<input type="button" id="endResult" value="Busca Cep" />

<div id="resultado">
// div que recebe o resultado


</div>


Javascript

window.addEvent('domready', function(){
var buscaCep = function(){
var endereco = $('endereco').get('value'); //recebe o endereço de input HTML
var resultado = $('resultado'); // div onde sera apresentado os resultados
resultado.innerHTML = '';

//funcao request do Mootools, que passa via POST o endereço
// a ser pesquisado, aqui voce pode usar qualquer framework ou fazer a mao :(
// passa o parametro endereço via POST ao proxy PHP

var request = new Request.JSON({
url: "proxy.php",
onSuccess: function(locais){locais.results.each(function(item){
resultado.innerHTML += "
"+item.formatted_address+"
";
})}
}).post({'endereco': endereco});
}

//vinculando a funcao buscaCep ao evento OnClik do input
$('buscar').addEvent('click', buscaCep);
});


PHP


<?php
$adress = str_replace(" ","+", $_POST['endereco']);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://maps.google.com/maps/api/geocode/json?address=$adress&sensor=false");
curl_exec($ch);
curl_close($ch);
?>


para o exemplo eu peguei somente o "formatted_address" retornado pelo Google,
se você quiser formatar o resultado de outra forma esta é a resposta.

{
"status": "OK",
"results": [ {
"types": [ "street_address" ],
"formatted_address": "Av. Afonso Pena, 643 - Amambaí, Campo Grande - MS, 79005-000, Brazil", // usei esta opçao por que em alguns testes o resultado do google veio de formas diferentes em alguns casos.
"address_components": [ {
"long_name": "643",
"short_name": "643",
"types": [ "street_number" ]
}, {
"long_name": "Av. Afonso Pena",
"short_name": "Av. Afonso Pena",
"types": [ "route" ]
}, {
"long_name": "Amambaí",
"short_name": "Amambaí",
"types": [ "neighborhood", "political" ]
}, {
"long_name": "Campo Grande",
"short_name": "Campo Grande",
"types": [ "locality", "political" ]
}, {
"long_name": "Mato Grosso do Sul",
"short_name": "MS",
"types": [ "administrative_area_level_1", "political" ]
}, {
"long_name": "Brazil",
"short_name": "BR",
"types": [ "country", "political" ]
}, {
"long_name": "79005-000",
"short_name": "79005-000",
"types": [ "postal_code" ]
} ],
"geometry": {
"location": {
"lat": -20.4668048,
"lng": -54.6306711
},
"location_type": "RANGE_INTERPOLATED",
"viewport": {
"southwest": {
"lat": -20.4699625,
"lng": -54.6338140
},
"northeast": {
"lat": -20.4636672,
"lng": -54.6275188
}
},
"bounds": {
"southwest": {
"lat": -20.4668249,
"lng": -54.6306711
},
"northeast": {
"lat": -20.4668048,
"lng": -54.6306617
}
}
},
"partial_match": true
}, {
"types": [ "street_address" ],
"formatted_address": "Travessa Afonso Pena, 643 - Chácara Cachoeira, Campo Grande - MS, 79031-010, Brazil",
"address_components": [ {
"long_name": "643",
"short_name": "643",
"types": [ "street_number" ]
}, {
"long_name": "Travessa Afonso Pena",
"short_name": "Travessa Afonso Pena",
"types": [ "route" ]
}, {
"long_name": "Chácara Cachoeira",
"short_name": "Chácara Cachoeira",
"types": [ "neighborhood", "political" ]
}, {
"long_name": "Campo Grande",
"short_name": "Campo Grande",
"types": [ "locality", "political" ]
}, {
"long_name": "Mato Grosso do Sul",
"short_name": "MS",
"types": [ "administrative_area_level_1", "political" ]
}, {
"long_name": "Brazil",
"short_name": "BR",
"types": [ "country", "political" ]
}, {
"long_name": "79031-010",
"short_name": "79031-010",
"types": [ "postal_code" ]
} ],
"geometry": {
"location": {
"lat": -20.4612687,
"lng": -54.5633648
},
"location_type": "RANGE_INTERPOLATED",
"viewport": {
"southwest": {
"lat": -20.4644168,
"lng": -54.5665221
},
"northeast": {
"lat": -20.4581215,
"lng": -54.5602269
}
},
"bounds": {
"southwest": {
"lat": -20.4612696,
"lng": -54.5633842
},
"northeast": {
"lat": -20.4612687,
"lng": -54.5633648
}
}
},
"partial_match": true
} ]
}

3 comentários:

Anônimo disse...

Olá poderia colocar um exemplo em pratica e ainda poderia postar o codigo completo para estudo??

Desde já sucesso em seus projeto.

André

Paulo Barbosa disse...
Este comentário foi removido pelo autor.
Paulo Barbosa disse...

Web Service Busca Cep com retorno xml do endereço completo, Latitude e longitude, codigo IBGE e população do municipio.

Acesse o site http://www.mapacep.com.br/webservice.asp e solicite a key para usar o serviço

MapaCEP - Busca CEP