Nueva pregunta

Pregunta:

Fecha: 28-02-2016 09:52:54 (En Español)

[aporte] Geolocalización W3C mostrada en Google Maps[Resuelta]

A partir de los datos de Geolocalizacion-basada-en-W3C.html se muestran los datos en un mapa a página completa en Google Maps. Se obvian detalles en código de geolocalización W3C ya mostrados como:
enableHighAccurace: true, // busca el mejor dispositivo de geolocalización (GPS, tiangulación, ...)

Se excluyen los datos básicos en la ventana de información, con detalle de círculo de error máximo en la geolocalización.

Es imprescindible acceder en <head> al API
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>

No son necesarias librerías ni otros accesos externos.

Presentado sobre HTML5 a pantalla completa (No se presentará la geolocalización sin la aprobación del usuario).
<!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&amp;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>


Considero suficientemente comentado el código.

Cualquier duda, háganmelo saber.
Etiquetas: Aporte - Geolocalización - Google Maps - Maps - W3C Votos: 4 - Respuestas: 6 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 28-02-2016 10:40:27 Muy bue aporte. +1
    He copiado el código y probado.
    El mapa entero se ve en color rosa. A que se debería?
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 10:47:35 Eso no te lo puedo explicar.

    Yo en tu lugar vería mi móvil y el poveedor de la señal.
    En el código en sí no está el color rosa. Pero si quieres lo montamos en versión Pink Panther

    ¿¿¿???
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 10:55:37 Desde el navegador de mi pc lo veo rosa al mapa
    desde el movil lo veo normal

    DEMO

    Desde mi móvil Rango de Error máximo de ubicación: 25.84000015258789 metros
    La ubicación es exacta.

    desde el navegador de la pc Rango de Error máximo de ubicación: 6078 metros.
    La ubicación es inexacta.

    Me esta mareando google maps.
      Votos: 2 - Link respuesta
     
  • Fecha: 28-02-2016 12:39:20 Hola Walter:
    El rosa o violeta claro lo dejaba en el círculo de rango de error. ¿Sería eso?

    Tu error de ubicación en PC está en el lugar desde donde te emiten la señal. Es normal. No es la ubicación de tu PC sino desde donde recibes la señal. Es diferente a cuando estás conectado por wifi. Ahí es tu ubicación natural (si no estás bajo techo, etc....).

    Si es importante el tema mi email es txema@artrain.eu. Reviso tus códigos.
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 12:46:44 Ya me di cuenta sobre el color rosa, al abrirlo con el navegador de mi pc me posiciona en cualquier lugar, entonces fillColor abarca toda la región en donde estoy.   Votos: 2 - Link respuesta
     
  • Fecha: 04-03-2016 00:34:10 Buen aporte como siempre Txema   Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión