<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Geolocalización mostrada con Google Maps">
<title>Geolocalización mostrada con Google Maps</title>
<style type="text/css">
html,body{height:100%;margin:0;padding:0;font-family:Trebuchet MS,verdana,arial}#mapa{height:100%}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=es"></script>
<script type="text/javascript">
<!-- //
var map;
// Controlamos los tiempos respecto a la última petición de geolocalización
var PositionOptions = {
timeout: 5000,
maximumAge: 120000,
enableHighAccurace: true
};
window.onload = function () {
// Opciones del tipo de mapa y zoom
var opciones = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
// Tipo de mapa elegido para mejor contraste de error de posición
// Puede acceder a vista satélite, ...
};
map = new google.maps.Map(document.getElementById('mapa'), opciones);
// Llamada a geolocalización de W3C
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, PositionOptions)
}
};
// Lo ya visto de geolocalización en W3C
function successCallback(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var accuracy = position.coords.accuracy;
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Mi posición'
});
// Se traslada el rango de error al mapa, dibujándolo
var circulo = {
strokeColor: "#008888",
strokeOpacity: 0.6,
strokeWeight: 5,
fillColor: "#880088",
fillOpacity: 0.3,
geodesic: true, // sobre grandes círculos muestra la variación geodésica
map: map,
center: latlng,
radius: accuracy
};
cityCircle = new google.maps.Circle(circulo)
var infowindow = new google.maps.InfoWindow({
content: 'Mi Geolocalización con W3CGeo y HTML5.<br>Latitud: ' + position.coords.latitude + '<br> Longitud: ' + position.coords.longitude + '<br>Rango de Error máximo de ubicación: ' + position.coords.accuracy + ' metros'});
infowindow.open(map, marker);
map.setCenter(latlng)
};
// Errores posibles de geolocalización
function errorCallback(error) {
var appErrMessage = null;
if (error.core == error.PERMISSION_DENIED) {
appErrMessage = "El usuario no ha concedido los privilegios de geolocalización"
} else if (error.core == error.POSITION_UNAVAILABLE) {
appErrMessage = "Posición no disponible"
} else if (error.core == error.TIMEOUT) {
appErrMessage = "Demasiado tiempo intentando obtener la localización del usuario."
} else if (error.core == error.UNKNOWN) {
appErrMessage = "Error desconocido"
} else {
appErrMessage = "Error insesperado"
}
document.getElementById("mensaje").value=appErrMessage;
};
// -->
</script>
</head>
<body>
<div id="mensaje" style="color:#AA0033;"></div>
<div id="mapa"></div>
</body>
</html>
Comentarios sobre la versión: 01.2015 (1)