GoogleMaps + CEP

Javascript, PHP, Webservices Add comments

Simples tutorial, mostrando como criar um Mashup usando o serviço de mapas do Google e um webservice de CEP com a linguagem PHP.

O funcionamento é simples. Consiste na requisição do logradouro passando o CEP como parâmetro para o serviço. A resposta então será enviada diretamente para o serviço de mapas, que através do logradouro informado, irá procurar as coordenadas geograficas e exibirá o ponto no mapa.

Adicionalmente será exibido o ponto exato do CEP pesquisado, através da figura padrão do “balão” do GoogleMaps.
Primeiramente, vamos adquirir a bibliotea NuSoap. Ela será utilizada para facilitar a requisição do endereço ao webservice.
Em seguida iremos baixar a biblioteca JSON, que irá serializar a resposta e retornar como um objeto JavaScript. Também iremos utilizar a biblioteca Prototype, para fazer as chamadas assincronas ao servidor.
Crie um arquivo php e coloque o seguinte código, explicarei em sequência.

<?php
/**
 * Essa é a parte cliente do webservice ( consumo )
 * Faz a consulta em um serviço de cep e retorna em notação JSON
 *
 */
//Define que o retorno será em javascript
header( "Content-type: text/javascript" );
 
// Inclue nossas bibliotecas
require_once("json.php");
require_once( "lib/nusoap.php" );
 
//Instancia um objeto Services_JSON
$json = new Services_JSON();
 
$res = array();
 
# Esse é o endereço do serviço
# Para você criar um webservice, necessariamente
# você precisar criar o WSDL, que nada mais eh do
# que um XML que explica como o serviço ira funcionar
#( Descrição dos métodos, tipos de dados, etc )
$wsdl = "http://www.byjg.com.br/xmlnuke-php/
		webservice.php/ws/cep?WSDL";
 
# Cria uma instancia do cliente
$client = new soapclient($wsdl,true);
 
//$client->useHTTPPersistentConnection();
 
# Se algo ocorrer errado, irá retornar um erro
# com a chamada desse metodo
$err = $client->getError();
if ($err)
{
    echo "<strong>Erro</strong> ao tentar 
	conectar-se ao Web Service: {$err}";
    exit();
}
 
# Recupera o CEP para passar como parametro para o serviço
# Poderia ser $cep_recuperado = 81000000;
# Neste caso iremos recuperar do formulario.
$cep_recuperado = ( string )$_GET["cep"];
 
# Aqui ele chama o método remoto, o primeiro
# parametro e o nome do metodo
# O segundo eh o paramentro que você vai
# passar para o método, nesse caso o cep
# A variavel $return ira conter o nome da
# rua referente à aquele cep informado
$return = $client->call( "obterLogradouro",array($cep_recuperado) );
 
## Pronto !. O cliente está feito.
?>

Agora veremos a parte de javascript, que ira requisitar a página criada

<!-- Importa a biblioteca prototype -->
<script src="prototype.js" type="text/javascript"></script>
 
<!-- Inclue a biblioteca do maps. É preciso informar sua api key, que pode ser
conseguida na própria página http://code.google.com/apis/maps/-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=SUAAPIKEY">
        type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=SUAAPIKEY">
type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/
trunk/markermanager/release/src/markermanager.js"></script>
<script language="Javascript" type="text/javascript">
 
// Esta função é chamada ao informar o cep pelo
// formulario no final dos códigos
function ajaxRequest()
{
    $("ajaxResultDiv").innerHTML = "carregando...";
 
    // Vamos enviar o processamento para a página 
    //PHP que foi criada anteriormente
    var url = "j.php";
 
    // Recuperando o CEP do formulário
    var pars = "cep="+("cepd");
 
    // Fazendo a chamada assincrona para o servidor,
    // e ao completar o processo
    // chamaremos a função "initilize"
    var myAjax = new Ajax.Request(
    url,
    {
        method: "get",
        parameters: pars,
        onComplete:initialize
    });
}
function initialize(data)
{
    // Aqui é recuperado a resposta do servidor no formato JSON
    // Trabalhamos com JSON como objeto e não como vetor
    var jsonObject = eval("(" + data.responseText + ")");
 
    var cep = jsonObject.ceps;
    var html = "";
 
    // Renderiza o mapa
    if (GBrowserIsCompatible())
    {
        var map = new GMap2($("ajaxResultDiv"));
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-25.429722, -49.271944), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
 
        // Aqui eu irei passar o logradouro recuperado
        // para exibição no mapa
        var addr = cep.Logradouro;
        var geocoder = new GClientGeocoder;
        geocoder.getLatLng( addr,function (point)    
        // <-- chamo a inner function "point"
        { if (!point)
        {
            $("ajaxResultDiv").innerHTML 
            = $("cepd").value+" nao encontrado";
        } else {
            var marker = new GMarker(point, {draggable: true});
            map.addOverlay(marker);
            map.setCenter(point,15 );
            $("searchcontrol").style.display="block";
        }});
    }
}
// Caso o logradouro seja encontrado, 
// será exibido o ponto no mapa
function (point)
{
    if (!point)
    {
        $("ajaxResultDiv").innerHTML = point+" nao encontrado";
    }
    else
    {
        var marker = new GMarker(point, {draggable: true});
        var map = new GMap2($("ajaxResultDiv"));
        map.addOverlay(marker);
    }
}
</script>
<p id="searchcontrol" style="display: none">carregando...</ p>
<fieldset>
<legend>Digite o CEP :</legend>
<input id="cepd" type="text" />
<input value="JSON" name="click" type="button" 
onclick="javascript:ajaxRequest();" >
</fieldset>

mapa.PNG

Para saber mais sobre a biblioteca Prototype.js, que foi utilizada no exemplo visite a documentação oficial AQUI

Uma otima referência em português sobre Google Maps podem ser encontradas no “Curso de GoogleMaps” do Bruno Campagnolo de Paula neste endereço -
http://www.brunocampagnolo.com/googlemaps/

Adicione ->del.icio.us | Reddit | Slashdot | Digg | Facebook | Technorati | Google | StumbleUpon | Windows Live | Tailrank | Furl | Netscape | Yahoo | BlinkList

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in