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&v=2&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>
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/


Recent Comments