Tutorial HTML: Como crear un localizador con HTML5
En el tutorial de hoy vamos a explicar como crear un localizador con HTML5, pero antes vamos a explicar qué es HTML5.
¿Qué es HTML5?
HTML5 es la quinta revisión importante del lenguaje HTML. En esta últimaa versión se incluyen nuevas características para ayudar a los autores de aplicaciones Web, se introducen nuevos elementos basados en la investigación sobre las prácticas de autor vigentes y se ha prestado especial atención a la definición de criterios claros de conformidad para los agentes de usuario en un esfuerzo por mejorar la interoperabilidad.
En segundo lugar creamos la función javaScript llamada coordenadas que utiliza la API Google Maps para que muestre los resultados obtenidos en la función obtnener_localizacion sobre el mapa:
¿Cómo crear un localizador con HTML5?
Aunque HTML5 solo es soportado por las últimas versiones de Chrome y Firefox, la gran potencia de desarrollo que permite junto con las nuevas funcionalidades de la API de Google Maps permiten ajustar casi al milímetro la posición actual del internauta, por esta razón me he decidido a escribir un tutorial sobre la creación de un localizador con HTML5.Ejemplo: Crear localizador con HTML5
En primer lugar crearemos la función para que el navegador obtenga las coordenadas:
<script language="javascript">
function obtener_localizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Tu navegador no soporta la API de geolocalizacion');
}
}
En segundo lugar creamos la función javaScript llamada coordenadas que utiliza la API Google Maps para que muestre los resultados obtenidos en la función obtnener_localizacion sobre el mapa:
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var mapa = document.getElementById("mapa");
mapa.src = "http://maps.google.com/maps/api/staticmap?center="+ latitud +
"," + longitud +
"&zoom=15&size=400x400&markers=color:green|label:A|"
+ latitud + "," + longitud + "&sensor=false";
}
</script>
Ahora simplemente lo que necesitamos será un botón para activar la función javaScript y una imagen llamada 'mapa' donde llamaremos al mapa de Google, a través de 'mapa.src' de la función anterior:
<a
href="javascript:obtener_localizacion();">Mostrar
Posición</a>
<p><img id="mapa" src=""></p>Y de esta manera se crea un localizador con HTML5.
También te puede interesar saber como dibujar rutas en Google maps y como calcular la distancia entre dos puntos con PHP.