Geolocalizador con PHP, Ajax y Google Maps

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.

Demo

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:

map

¿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:

simple

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&oacute;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:

permitir

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&oacute;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!

24 Comentarios
  • Victor
    Publicado el 14:29h, 26 junio Responder

    Muy 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 Responder

      ¡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 agosto Responder

      Amigo 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 agosto Responder

        Hola 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 agosto Responder

    Podrí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 agosto Responder

      Hola 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 noviembre Responder

    My 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 noviembre Responder

      thank 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 marzo Responder

    Excelente post, pero el link de descarga no funciona. Podrias enviarmelo por favor 🙂

  • adriana chavez
    Publicado el 08:31h, 28 abril Responder

    me 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 abril Responder

      Ahora te lo mando por correo.
      Voy a cambiar el enlace de descarga,

      un saludo 😉

  • Henry
    Publicado el 16:56h, 19 julio Responder

    Muy 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 julio Responder

      Hola 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 julio Responder

    hola 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 noviembre Responder

    Q 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 noviembre Responder

      Hola 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 noviembre Responder

    Hola 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 noviembre Responder

    Por 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 julio Responder

    Gracias 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 julio Responder

      Hola 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 julio Responder

    Amigo que buen aporte, me podrías enviar el código al correo. Te lo agradezco mucho.

    • webcamp
      Publicado el 08:00h, 30 julio Responder

      Hola 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 enero Responder

    Comparto mi tutorial de geolocalización con PHP(latitud y longitud) digitando una dirección: http://ayudawwweb.com/geolocalizacion-con-php-latitud-y-longitud/

Añadir Comentario