Tutorial HTML5 – Geolocalización – Obtener Coordenadas de Usuario

 

En el primer tutorial de HTML5, vamos a utilizar el localizador de posición que ofrece HTLM5. Funcionará en función de la versión del navegador.

Podríamos obtener solo las coordenadas, pero para que podamos verlo de forma más clara  y precisa pintaremos sobre el mapa de Google la posición del usuario.

 

 

[wp_ad_camp_2]

Creamos la función para obtener las coordenadas:

<script type="text/javascript" language="javascript">// <![CDATA[
function get_loc() {
       if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(coordenadas);
       }else{
          alert('Este navegador es algo antiguo, actualiza para usar el API de localización');                  }
}

Después mostramos las coordenadas en Google Maps:

 

 

function coordenadas(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      var map = document.getElementById("mapa");
      map.src = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + "&amp;zoom=15&amp;size=600x480&amp;markers=color:red|label:A|" + lat + "," + lon + "&amp;sensor=false";
}
// ]]></script>

 

Y el siguiente código html:

<a href="javascript:get_loc();">Mostrar localización</a>
<br />

 

A continuación podemos ver el resultado:

Ubicacion - Apprendemos.com

 

Aquí podéis probarlo y descargarlo:

Geolocation – Apprendemos.com

Author Image
Author: ManuAlamar iOS & .NET Developer. Ingeniero Técnico Informático especialmente interesado en proyectos relacionados con la tecnología móvil y web