Hoy vamos a trabajar con la API de Google Maps.<\/p>\n
En primer lugar, vamos a montar un mapa en el que, al hacer click, Google de forma autom\u00e1tica nos proporcione la direcci\u00f3n de la posici\u00f3n elegida. \u00c9sto dar\u00e1 otra nueva funcionalidad a nuestra p\u00e1gina web haci\u00e9ndola m\u00e1s atractiva y din\u00e1mica.<\/p>\n
Ya sab\u00e9is nuestra teor\u00eda, “con lo que cuesta que lleguen, hay que hacer que los usuarios se queden”, y no hay mejor forma que proporcionar al usuario de nuestra p\u00e1gina web herramientas para que interaccione con nuestro proyecto.<\/p>\n
Para ello, trabajaremos en Java Script (jQuery) y tenemos una funci\u00f3n que monta un mapa de Google Maps pas\u00e1ndole como par\u00e1metros una latitud, una longitud y un zoom.<\/p>\n
var marker = null;\r\nfunction mapaGoogle(latitud,longitud,zoom)\r\n{ \t\t\r\n\tvar map;\r\n\tvar mapOptions = {\r\n\t\t\tzoom: zoom,\r\n\t\t\tdisableDefaultUI: true,\r\n\t\t\tcenter: new google.maps.LatLng(latitud,longitud), \r\n\t\t\tmapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t};\r\n\tmap = new google.maps.Map(document.getElementById('map_wrapper'), mapOptions);\r\n\tgoogle.maps.event.addListener(map, 'click', function(event) {\r\n\t\tif (marker) { marker.setMap(null); }\r\n\t\tmarker = new google.maps.Marker({ position: event.latLng, map: map});\r\n\t\tautoCompletar(marker);\r\n\t});\r\n}<\/pre>\nA continuaci\u00f3n, a\u00f1adimos la funci\u00f3n autocompletar, al que al pasarle un marcador de Google (marker) intenta obtener la direcci\u00f3n f\u00edsica que le corresponde, con todos sus datos (calle, n\u00famero, c\u00f3digo postal, municipio, provincia, comunidad aut\u00f3noma y pa\u00eds)<\/p>\n
function autoCompletar(marcador)\r\n{\r\n\tif(marcador)\r\n\t{\r\n\t\tvar pos=marcador.getPosition()\r\n\t\tvar resultado=consultaGoogle(pos.lat()+','+pos.lng(),2);\r\n\t\tif(resultado)\r\n\t\t{\r\n\t\t\tif(confirm('Desea a\u00f1adir la siguiente direcci\u00f3n en sus datos personales: '+resultado.completa))\r\n\t\t\t{\r\n\t\t\t\t$('.datos_facturacion').html(JSON.stringify(resultado.address_components));\r\n\t\t\t\t$('#dir input[name=\"direccion'+direccion+'\"]').val(resultado.calle+' '+resultado.numero);\r\n\t\t\t\t$('#dir input[name=\"cp'+direccion+'\"]').val(resultado.cp);\r\n\t\t\t\t$('#dir input[name=\"localidad'+direccion+'\"]').val(resultado.localidad);\r\n\t\t\t\t$('#dir select[name=\"pais'+direccion+'\"]').val(resultado.pais);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}<\/pre>\nComo pod\u00e9is ver, esta funci\u00f3n hace una consulta a la funci\u00f3n consultaGoogle. Esta funci\u00f3n es bidireccional, y puede obtener la direcci\u00f3n d\u00e1ndole unas coordenadas o viceversa.<\/p>\n
function consultaGoogle(consulta,tipo)\r\n{\r\n\tresultado=false;\r\n\t$.ajax({\r\n\t\ttype: \"GET\",\r\n\t\tasync:false,\r\n\t\turl: '\/frm\/ajax\/getDireccion.php?tipo='+tipo+'&consulta='+encodeURI(consulta)\r\n\t}).done(function ( res ) {\r\n\t\tif(res!='ERROR')\r\n\t\t\tresultado=JSON.parse(res);\r\n\t});\r\n\treturn resultado;\r\n}<\/pre>\nDe nuevo, esta funci\u00f3n (como no pod\u00eda ser de otra manera) requiere de un \u00faltimo fragmento de c\u00f3digo. \u00c9ste es php y es consultado por ajax. Se le env\u00eda la consulta y \u00e9l, seg\u00fan los par\u00e1metros recibidos, env\u00eda la petici\u00f3n a Google v\u00eda CURL, la procesa (es m\u00e1s f\u00e1cil trabajar con arrays y json en php que en Java Script en mi humilde opini\u00f3n) y nos devuelve el resultado.<\/p>\n
function getDatosGoogle ($dir)\r\n{\r\n\t\t$url = 'http:\/\/maps.google.com\/maps\/api\/geocode\/json?address='.urlencode($dir).'&sensor=false&language=es';\r\n\t\t\/\/set the url, number of POST vars, POST data\r\n\t\t$defaults = array( \r\n\t\t\t\t\tCURLOPT_POST => 1, \r\n\t\t\t\t\tCURLOPT_HEADER => 0, \r\n\t\t\t\t\tCURLOPT_URL => $url, \r\n\t\t\t\t\tCURLOPT_FRESH_CONNECT => 1, \r\n\t\t\t\t\tCURLOPT_RETURNTRANSFER => 1, \r\n\t\t\t\t\tCURLOPT_FORBID_REUSE => 1, \r\n\t\t\t\t\tCURLOPT_TIMEOUT => 4\r\n\t\t\t); \/\/execute post\r\n\t\t$ch = curl_init();\r\n\t\tcurl_setopt_array($ch,$defaults);\r\n\t\t$result = json_decode(curl_exec($ch),true);\r\n\t\tcurl_close($ch); \/\/close connection\r\n\t\treturn $result;\r\n}\r\n$resultado=getDatosGoogle($_GET['consulta']);\r\nif($resultado['status']=='OK')\r\n{\r\n\r\n\tswitch(intval($_GET['tipo']))\r\n\t{\r\n\t\tcase 1: \/\/ long lat\r\n\t\t\techo json_encode(array('lat'=>$resultado['results'][0]['geometry']['location']['lat'],'lng'=>$resultado['results'][0]['geometry']['location']['lng']));\r\n\t\t\texit();\r\n\t\tcase 2:\r\n\t\t\t$res_final=array(\r\n\t\t\t\t'completa'=>$resultado['results'][0]['formatted_address'],\r\n\t\t\t\t'cp'=>'',\r\n\t\t\t\t'localidad'=>'',\r\n\t\t\t\t'provincia'=>'',\r\n\t\t\t\t'numero'=>'',\r\n\t\t\t\t'calle'=>''\r\n\t\t\t);\r\n\t\t\tforeach($resultado['results'][0]['address_components'] as $componente)\r\n\t\t\t{\r\n\t\t\t\tswitch($componente['types'][0])\r\n\t\t\t\t{\r\n\t\t\t\t\tcase 'postal_code':\r\n\t\t\t\t\t\t$res_final['cp']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 'locality':\r\n\t\t\t\t\t\t$res_final['localidad']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 'administrative_area_level_2':\r\n\t\t\t\t\t\t$res_final['provincia']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 'country':\r\n\t\t\t\t\t\t$res_final['pais']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 'street_number':\r\n\t\t\t\t\t\t$res_final['numero']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 'route':\r\n\t\t\t\t\t\t$res_final['calle']=$componente['long_name'];\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\techo json_encode($res_final);\r\n\t\t\texit();\r\n\t\tdefault:\r\n\t\t\texit('ERROR');\t\r\n\t}\r\n}else exit('ERROR');<\/pre>\nY es as\u00ed de sencillo (sobre todo si cog\u00e9is estas funciones ya desarrolladas)<\/p>\n
\u00a1Esperamos que os sea de utilidad!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hoy vamos a trabajar con la API de Google Maps. En primer lugar, vamos a montar un mapa en el que, al hacer click, Google de forma autom\u00e1tica nos proporcione la direcci\u00f3n de la posici\u00f3n elegida. \u00c9sto dar\u00e1 otra nueva … Sigue leyendo