Una aplicación del artículo precedente en el que utilizamos el ‘Google Maps API Geocode web service’ para traer a la ficha de Direcciones Postales de Sage CRM, en tiempo real, los datos de Población y Provincia entrando el Código Postal.
Empleando este procedimiento no necesitaremos mantener una tabla de códigos postales en nuestro propio sistema.
En este vídeo mostramos el resultado. Como verás una vez introducido el código postal la población y la provincia se rellenan dinámicamente. Tanto en la creación de un nuevo registro como en la modificación de un registro existente.
A continuación el lugar de Sage CRM donde incrustamos la función JavaScript para activar la llamada al WS de Google que nos devuelve en tiempo real la Población y Provincia dinámicamente al entrar el Código Postal…
La función está operativa solo para códigos postales de España (ES), pero con una pequeña modificación del país en la cadena de la url de llamada al Web Service se puede adaptar para cargar datos postales de otras naciones.
La solución invoca al motor de datos de Google que le pide sean devueltos en formato Json. Hay dos formatos disponibles: XML y JSON. Nosotros para este primer ejemplo hemos resuelto hacerlo con Json.
Código JavaScript de nuestra función:
<script type=»text/javascript»>
function cpostal() {
(function() {
var Lib = {
ajax: {
xhr: function() {
var instance = new XMLHttpRequest();
return instance;
},
getJSON: function(options, callback) {
var xhttp = this.xhr();
options.url = options.url || location.href;
options.data = options.data || null;
callback = callback ||
function() {};
options.type = options.type || ‘json’;
var url = options.url;
if (options.type == ‘jsonp’) {
window.jsonCallback = callback;
var $url = url.replace(‘callback=?’, ‘callback=jsonCallback’);
var script = document.createElement(‘script’);
script.src = $url;
document.body.appendChild(script);
}
xhttp.open(‘GET’, options.url, true);
xhttp.send(options.data);
xhttp.onreadystatechange = function() {
if (xhttp.status == 200 && xhttp.readyState == 4) {
callback(xhttp.responseText);
}
};
}
}
};
window.Lib = Lib;
})()
var valor = document.getElementById(‘addr_postcode’).value ;
Lib.ajax.getJSON({
url: ‘http://maps.google.com/maps/api/geocode/json?address=’+valor+’&components=country:ES&sensor=false’,
type: ‘jsonp’
}, function(jsondata) {
var info = JSON.parse(jsondata);
var poblacion = info.results[0].address_components[1].long_name;
var provincia = info.results[0].address_components[2].long_name;
EntryForm.addr_city.value = poblacion;
EntryForm.addr_state.value = provincia;
});
}
</script>
Una vista en el navegador de una consulta en al Google Maps API Geocode solicitada en JSON y devuelta en tiempo real seleccionando el código postal ‘35001’ de España ‘ES’.
http://maps.googleapis.com/maps/api/geocode/json?address=35001&components=country:ES&sensor=true
Como complemento a la solución anterior acompañamos también el código incluyendo la petición que nos sea devuelta en formato de datos XML:
<script type=»text/JavaScript»>
//xml parse
//API google maps service
//IE,chrome,firefox,safari
//@angel_torre 2014 feb
//input cpostal,request google maps api,retrieve city and state.
function cpostal() {
var valor = document.getElementById(‘addr_postcode’).value;
fichXML = ‘http://maps.google.com/maps/api/geocode/xml?address=’+valor+’&components=country:ES&sensor=false’;
var xhr = new XMLHttpRequest();
xhr.open(‘GET’,fichXML,false);
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
var xmlDoc = xhr.responseText;
var pos0 = xmlDoc.indexOf(«<long_name>»);
if (pos0!=-1) {
var pos1 = xmlDoc.indexOf(«<long_name>»,pos0+1);
var pos2 = xmlDoc.indexOf(«</long_name>»,pos1+1);
var prim = xmlDoc.slice(pos1+11,pos2);
var pos3 = xmlDoc.indexOf(«<long_name>»,pos2+1);
var pos4 = xmlDoc.indexOf(«</long_name>»,pos3+1);
var segu = xmlDoc.slice(pos3+11,pos4);
document.forms[0].addr_city.value = prim;
EntryForm.addr_city.value = prim;
document.forms[0].addr_state.value = segu;
EntryForm.addr_state.value = segu;
}
}
}
xhr.send(null);
}
</script>
Ejemplo de formato de los datos recibidos de Google en XML
Espero tus sugerencias y comentarios, siempre bienvenidos.
Gracias por tu atención.
