18 Jun Geolocalizador con PHP, Ajax y Google Maps
Vamos a crear algo totalmente distinto al último post.
Un ¡GEOLOCALIZADOR! utilizando PHP, Ajax, Simple HTML DOM Parser y Google Maps.
Puedes descargarte el archivo completo al final de la entreda.
Es posible que no te funcione la demo por cambios recientes en google maps. Estoy creando una nueva entrada con un nuevo geolocalizador web. Si tienes dudas, ponte en contacto conmigo.
Para éste tutorial sería conveniente que tuvieras conocimientos básicos de PHP y JavaScript.
Lo que haremos será mostrar la etiqueta de google maps donde muestra el código postal, la ciudad y la província de donde nos encontramos:
¿Cómo lo haremos?
Muy fácil, utilizando la api de geolocalización de HTML5 con JavaScript, Simple HTML DOM para acceder al contenido de google maps y Ajax y PHP para mostrar el resultado de tu ubicación.
¡Al lio!
Primero de todo accede a simple html dom parse y descargate el archivo simple_html_dom.php solamente. Es el único archivo que necesitamos:
Ahora en tu carpeta creamos un archivo index.php (también puede ser html) y añadimos los respectivos links del css y jquery:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Geolocalizador web</title> <link href="css/reset.css" rel="stylesheet" style="text/css" /> <link href="css/main.css" rel="stylesheet" style="text/css" media="screen" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Después creamos un div #container con su h1, h2 y un botón de localización:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Geolocalizador web</title> <link href="css/reset.css" rel="stylesheet" style="text/css" /> <link href="css/main.css" rel="stylesheet" style="text/css" media="screen" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <div id="container"> <div id="errorjs" style="color:red;font-size:25px;margin-top:30px;"></div> <h1>Geolocalizador <em>webcamp.es</em></h1> <h2>Haz click en el siguiente botón para localizarte</h2> <button id="btn">¡Localizame!</button> </div> </body> </html>
El primer div -> id=»errorjs» es donde mostraremos los errores de localización (si los hay) y la imágen de carga.
Y le añadimos los estilos CSS al archivo main.css que hemos incluido anteriormente en el head:
body {
font-family: Verdana, Arial, sans-serif;
}
#container {
padding: 20px;
text-align: center;
max-width: 700px;
margin: 0 auto;
}
h1 {
font-size: 35px;
font-weight: bold;
margin-top: 20px;
}
h1 em {
color: #9fcd32;
}
h2 {
color: #6f6f6f;
font-size: 20px;
margin: 30px 0px 20px 0px;
}
#btn, .map {
font-size: 30px;
margin: 20px;
padding: 10px;
cursor: pointer;
}
.pos {
font-size: 25px;
font-weight: bold;
color: #ce3131;
}
El .map y el .pos són clases del archivo que veremos más adelante, pero ya los podemos dejar puestos.
Ahora viene la clave, donde localizaremos nuestra posición con jQuery y la pasaremos por Ajax a nuestro segundo archivo PHP que será el que nos muestre los resultados.
Creamos un script antes del cierre de la etiqueta html y añadimos lo siguiente:
(function(){
//capa para mostrar las coordenadas (definida tambien en el HTML)
var errorjs=document.getElementById('errorjs');
//verificamos si el navegador soporta Geolocation API de HTML5
if(navigator.geolocation){
//intentamos obtener las coordenadas del usuario
navigator.geolocation.getCurrentPosition(function(objPosicion){
//almacenamos en variables la longitud y latitud
var iLongitud=objPosicion.coords.longitude, iLatitud=objPosicion.coords.latitude;
//pasamos las variables por ajax
$("#btn").on( 'click', function () {
$.ajax({
type: 'post',
url: 'localizado.php',
data: 'long='+iLongitud+'&lat='+iLatitud,
success: function( data ) {
document.write( data );
}
});
errorjs.innerHTML='<img src="load.gif" />';
});
},function(objError){
//manejamos los errores devueltos por Geolocation API
switch(objError.code){
//no se pudo obtener la informacion de la ubicacion
case objError.POSITION_UNAVAILABLE:
errorjs.innerHTML='La información de tu posición no es posible';
break;
//timeout al intentar obtener las coordenadas
case objError.TIMEOUT:
errorjs.innerHTML="Tiempo de espera agotado";
break;
//el usuario no desea mostrar la ubicacion
case objError.PERMISSION_DENIED:
errorjs.innerHTML='Necesitas permitir tu localización';
break;
//errores desconocidos
case objError.UNKNOWN_ERROR:
errorjs.innerHTML='Error desconocido';
break;
}
});
}else{
//el navegador del usuario no soporta el API de Geolocalizacion de HTML5
errorjs.innerHTML='Tu navegador no soporta la Geolocalización en HTML5';
}
})();
Vamos a explicar por partes.
Creamos una función donde seleccionamos el primer id del html -> errorjs para después poder mostrar la imágen de carga o los errores de localización si hubieran.
Comprobamos con un if si el navegador soporta la geolocalización de HTML5 con -> navigator.geolocation. Obtenemos las coordenadas del usuario y las almacenamos en dos variables imprescindibles: iLongitud e iLatitud que són las variables que pasaremos al segundo archivo para mostrar los resultados.
Para pasar las variables a la otra página para que las reciba, lo haremos con Ajax:
Type -> El tipo de envio.
url -> la página de destino, en este caso localizado.php que la crearemos enseguida.
data -> Es lo que acompaña a la url y son las variables de latitud y longitud.
Y añadimos la imágen de carga en el div errorjs.
Después creamos la función de errores si esque los hay:
POSITION_UNAVAILABLE -> No se puede obtener posición.
TIMEOUT -> Tiempo de espera agotado.
PERMISSION_DENIED -> Necesitas permitir el acceso. Esto es lo que te pide justo cuando entras en la página. Ejemplo Google Chrome:
UNKNOWN_ERROR -> Error desconocido.
Y finalmente en el caso de que el navegador no soporte la geolocalización en html5 lo añadimo en el else del if anterior.
¡Sigamos!
Ahora creamos el archivo localizado.php que es el que recibe los datos y los muestra por pantalla.
Arriba del todo incluimos esto:
<?php //incluimos simple html dom require_once('simple_html_dom.php'); //variable longitud $long = $_POST['long']; //variable latitud $lat = $_POST['lat']; //buscamos el resultado con la latitud y longitud de google maps $html = file_get_html("https://maps.google.es/maps?q=$lat,$long"); //buscamos el resultado del código postal y la província localizada con simple html dom foreach($html->find('span[class=pp-headline-item pp-headline-address]') as $element)
//$element es el resultado
?>
Incluimos simple html dom con require_once, creamos las 2 variables $long y $lat que le hemos pasado por Ajax. Ahora es cuando simple html dom entra en acción. Creamos una variable $html que es la url de google maps y al final le incluimos las 2 variables por el orden en que aparecen. Dentro del foreach le decimos que busque en la página la etiqueta span con la clase pp-headline-item pp-headline-address que es donde muestra el código postal, la ciudad y la província y le asignamos una nueva variable $element.
Ahora mostramos los resultados por pantalla y le damos la opción de ir a google maps para ver su posición:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Geolocalizador web</title> <link href="css/reset.css" rel="stylesheet" style="text/css" /> <link href="css/main.css" rel="stylesheet" style="text/css" media="screen" /> </head> <body> <div id="container"> <h1>¡Localizado!</h1> <h2>Tu posición es:</h2> <?php echo $element; ?> <a href='<?php echo "https://www.google.es/maps/place/$lat,$long"; ?>' target="_blank"><button class="map">Ver en google maps</button></a> </div> </body> </html>
Dentro de la clase pos mostramos los resultados y en el link de abajo, que es el que te lleva a google maps, le añadimos la url más las dos variables.
Y aquí acaba este tutorial. ¡Espero que te haya servido de ayuda!
Puedes descargarte el archivo en el siguiente botón:
Para cualquier duda escríbeme un comentario o ponte en contacto conmigo 😉
¡Hasta el próximo POST!
Victor
Publicado el 14:29h, 26 junioMuy buen ejemplo! yo solo hice una versión más sencilla http://demohtml5.netne.net/geolocalizacion-html5.html 😀
Santi Camp
Publicado el 15:31h, 26 junio¡Muchas gracias Victor! Lo bueno del tuyo es que muestras directamente el mapa de google.
Y piensa que SIMPLE HTML DOM es muy fácil de utilizar.
Cristopher Estrada
Publicado el 22:06h, 27 agostoAmigo que tal esta excelente tu ejemplo pero lo estaba checando y no me funciona me podrías ayudar te lo agradeceria mucho no imprime en tu posición es:
Gracias Saludos!!!
Santi Camp
Publicado el 18:48h, 31 agostoHola Cristopher,
la verdad que hace ya unos días que no funciona del todo bien… Creo que el problema es que Google ha cambiado el nombre de la classe donde debe leer el php y es por eso que no muestra nada. Intentaré esta semana arreglarlo y lo volveré a subir. Te aviso por email cuando lo tenga,
un saludo ::)
Gerard
Publicado el 13:00h, 01 agostoPodrías explicar un poco más e tema de mandar las coordenadas por mali? Me he mirado el post a comentas y no termino de entenderlo. Sabes de algún ejemplo que pueda ver como esta hecho? Sino es así, te sabria mal hacer uno?
Muchas gracias, nuevamente un gran post!
Gerard
Santi Camp
Publicado el 15:00h, 03 agostoHola Gerard, no se muy bien a que te refieres con lo de enviar las coordenadas por mail. La latitud (iLatitud) y longitud (iLongitud), las pasamos por ajax mediante el método post a la página que las recibe para mostrar el contenido de google maps. Si quisieras mandarlas por email, sólo tendrías que crear las 2 variables y enviarlas. Puedes ver un ejemplo en la demo de arriba y a parte puedes descargarte el archivo al final de la entrada para que veas cómo está hecho y modificarlo si quieres. Si tienes alguna duda envíame un correo en la sección de contacto y te ayudo en lo que necesites.
Grácias y un saludo 😉
ugg australia rockport outlet
Publicado el 08:18h, 16 noviembreMy relatives all the time say that I am wasting my time here at web, except I know I am getting know-how every day by reading such good articles.
Santi Camp
Publicado el 13:30h, 16 noviembrethank you very much for your comment. I don’t think learning new things is wasting time. From now I will try to make my posts in English so we all understand better.
Ana Rotela
Publicado el 13:11h, 02 marzoExcelente post, pero el link de descarga no funciona. Podrias enviarmelo por favor 🙂
Santi Camp
Publicado el 14:13h, 02 marzoUoo que raro.
Te lo mando por correo.
adriana chavez
Publicado el 08:31h, 28 abrilme gusto mucho tu post, muy bien explicado !!, mas tengo el mismo problema que ana no logro descargar el fichero localizador.zip ¿podrías mandármelo ? gracias de ante mano
Santi Camp
Publicado el 08:39h, 28 abrilAhora te lo mando por correo.
Voy a cambiar el enlace de descarga,
un saludo 😉
Henry
Publicado el 16:56h, 19 julioMuy bueno el ejemplo, hay alguna manera de que no salga el mensaje: «Necesitas permitir el acceso»?,
Quiero hacer publicidad geolocalizada: en mi pagina web quiero mostrar publicidad dependiendo de donde esta el cliente, es decir si pasa por la tienda de mc donald, y el entre a la página, le salga la publi de mac donald sin necesidad de permitir el acceso.
Gracias
Santi Camp
Publicado el 08:43h, 20 julioHola Henry,
para que no salga el mensaje, que yo sepa la única opción que tienes es localizarlo mediante IP, el problema es que no es ni la mitad de preciso.
Pero tampoco veo que sea un problema. Empresas como wallapop utilizan este mismo mecanismo para localizar al usuario.
Otra manera sería mediante el código postal pero tendrías que tener un array con toda la información.
Ahora mismo te paso el archivo por mail,
un saludo 😉
edwin
Publicado el 19:43h, 21 juliohola amigo muy buen post, pero el link de descarga esta malo.
te agradezco si me lo envías al correo.
Gracias
Developer
Publicado el 00:11h, 18 noviembreQ tal Amigo, una pregunta, hay alguna forma de obtener las coordenadas más precisas?
He visto varios ejemplos, y todos funcionan básicamente de la misma forma ( del lado cliente ):
Independientemente si usan ajax o no, hacen la función de navigator.geolocation.getCurrenPosition, ya que es por lo visto la que hace la «magia» de obtener las coordenadas , en tu caso:
navigator.geolocation.getCurrentPosition(function(objPosicion){
//almacenamos en variables la longitud y latitud
var iLongitud=objPosicion.coords.longitude, iLatitud=objPosicion.coords.latitude;
…..
……
}
Pero he probado en todos los navegadores y la ubicación no es muy exacta, y a veces varia de 30 hasta 400 metros
( el dato que me arroja el objeto con la función coords.accuracy )
Sabes si existe alguna forma de obtener mayor precisión?
De antemano gracias 🙂
webcamp
Publicado el 09:48h, 18 noviembreHola Developer,
pues la verdad que no se exactamente cómo hacer que sean más precisas…
¿Has probado de que sólo muestre las coordenadas sin utilizar la función de simplehtmldom para acceder al contenido de google?
A veces hasta google falla en este sentido.
También puedes buscar otro servicio de geolocalización que no sea google pero creo que más preciso que esto no lo vas a encontrar gratis…
En todo caso prueba lo que te he dicho, de sólo mostrar las coordenadas sin utilizar el parser y a ver como te lo muestra.
También puedes ver este blog que explica otra forma de hacerlo, igual es más preciso y todo.
Cualquier cosa ya saber,
un saludo 😉
Developer
Publicado el 18:11h, 18 noviembreHola Amigo, gracias por la pronta respuesta!
Te soy sincero, no probé el ejemplo con el archivo simplehtmldom
Ya que como te había comentado, analizando el código de varios post (como el tuyo y del que me acabas de brindar el link), las coordenadas las obtienen de la misma forma, mediante la función navigator.geolocation.getCurrentPosition()
Generé un ejemplo muy sencillo, para obtener mi posición actual (espero no haya problemas con las etiquetas html :S )
Geolocalización2 JAVASCRIPT
function localizar()
{
navigator.geolocation.getCurrentPosition(function(posicion){
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
var precision = posicion.coords.accuracy;
console.log( ‘Latitud = ‘+latitud+’, Longitud= ‘+longitud+’, Rango error: ‘+precision);
},function(error){
console.log(«error»);
});
}
Ver mi ubicación
En caso de que se pueda apreciar el código jeje, se puede observar como no hago uso del api o script de google, sino que se hace solamente uso de la función que antes te había mencionado, propia de HTML5 (corrígeme si me equivoco)
Con este pequeño ejemplo obtengo mis coordenadas, el detalle es que no siempre son las mismas, varian de 30 a 400 metros ( X . X )
Esto es mucha distancia para una aplicación que necesite presición, pero a lo mejor, como lo comentas, no exista por el momento algo más exacto , al menos no de forma gratuita
Te agradezco el post y las respuestas
Saludos!
Developer
Publicado el 18:24h, 18 noviembrePor lo visto si hubo problemas al poner las etiquetas , pero básicamente unicamente falto el botón que hace referencia a la función localizar()
Lil Junior
Publicado el 15:10h, 14 julioGracias por el aporte, es muy bueno, pero quisiera preguntar el mandar los datos por Ajax se puede hacer de forma automática, a que me refiero con forma automática, sin la necesidad de presionar el botón, ya que estoy usando la opción watchPosition y a lo que se esta función al cambiar ejecuta nuevamente la función, lo que quisiera saber es si se puede mandar vía Ajax el valor de altitud y longitud, para almacenarlos en una base de datos y posteriormente generar la ruta.
Saludos!
webcamp
Publicado el 15:32h, 14 julioHola Lil Junior,
sin problemas. Puedes mandar los datos automáticamente simplemente con un:
$(document).ready(function(){
//envío ajax…
});
Que significa que cuando el documento está listo, hacer tal función.
Y puedes almacenarlo perfectamente en una base de datos con las varibables $lat y $long y simplemente haciendo una consulta a la bbdd de estos dos valores, puedes mostrar el resultado igualmente.
El único problema que le veo es que si lo haces sin la necesidad de presionar ningún botón (por ejemplo: «Localízame») seguramente el navegador le avisará de que tu página tiene la intención de saber sus coordenadas… Pero por lo demás no veo ningún problema 😉
Andres
Publicado el 21:39h, 29 julioAmigo que buen aporte, me podrías enviar el código al correo. Te lo agradezco mucho.
webcamp
Publicado el 08:00h, 30 julioHola Andres, al final de la entrada tienes un botón de descarga. Si no puedes descargarlo comentame y te lo paso por correo 😉
nattadsa
Publicado el 06:17h, 09 eneroComparto mi tutorial de geolocalización con PHP(latitud y longitud) digitando una dirección: http://ayudawwweb.com/geolocalizacion-con-php-latitud-y-longitud/
Rchasi
Publicado el 05:17h, 23 enerosaludos amigo he probado tu codigo pero no me funciona , tengo un centos 7 con httpd y php instalado por mi cuenta , me faltara algun componente al servidor, o dar algun permiso especifico . gracias
santiakus
Publicado el 11:53h, 23 eneroHola,
veo que muchas de mis entradas no funcionan por culpa de la versión de jQuery y esta a parte porque google ha cambiado muchas de sus características de google maps pero voy a mirar de solucionar todos estos problemas y vuelvo a publicarlo lo antes posible ok?
De todas formas ya sabes que puedes descargarte el script y mirar si alguien puede encontrar alguna solución por algún foro mientras trato de mejorarlo…
Saludos 😉
Alexis zanchez
Publicado el 23:27h, 07 mayoAún sigue en funcionamiento?
santiakus
Publicado el 16:22h, 29 septiembreNo acaba de funcionar.. Tengo que arreglarlo
Juan CArlos Robayo
Publicado el 04:10h, 02 agostoHola, buena noche estoy en colombia y me sale en rojo que sale que necesito permisos e localizacion, lo heprobado en celular y lo mismo, gracias
Vanessa Neyra
Publicado el 11:38h, 21 agostoHola Web Camp buenos dias te saluda Vanessa excelente aporte gracias por ser tan didáctico y amable intente descargar el archivo y no descarga, podrias enviármelo por favor? Gracias
Vanessa Figueroa
Publicado el 04:07h, 03 septiembreHola me encanto tu aporte pero me gustaría instalarlo en mi paina de wordpress, es posible?
santiakus
Publicado el 16:24h, 29 septiembreHola, por el momento no funciona, tengo que arreglarlo
Osvaldo Callegari
Publicado el 14:20h, 18 febreroHola A mi me funciono bien en el movil, me dio la posicion con un margen de 30 metros, esta muy bien gracias.