Nueva pregunta

Pregunta:

Fecha: 27-02-2016 16:01:30 (En Español)

Google Maps - no se visualiza el mapa en el móvil[Resuelta]

Hola a todos
En esta ocasión los molesto por un problema que estoy teniendo al intentar implementar google maps.
Recien estoy aprendiendo lo básico sobre la API. Mapas estáticos y dinámicos.

Se trata de que encuentre mi ubicación y con un maker lo marque en el mapa estatico.
Desde mi pc y desde mi movil con wifi funcionaba bien pero si a mi móvil le desconectaba wifi y uso solamente la red de datos de mi operador no funciona, en el mapa se veía de la siguiente manera.


en https://console.developers.google.com/apis tengo habilitados

Google Maps JavaScript API
Google Static Maps API
Google Maps Geolocation API
Google Places API Web Service
Google Maps Embed API

Y tambien tengo creada la Claves de API que lo coloco según lo que entiendo en las especificaciones

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=MIKEYAPI">  </script>


En inspeccionar elemento, en JS no hay ningún error.

He estado buscando en la red algo al respecto pero no he encontrado algo que me pueda dar alguna idea del problema.

Espero que algún experto en la materia me pueda dar una ayuda.

Saludos
Etiquetas: Google API - Google Maps - Maps - Mobile - Pregunta Votos: 2 - Respuestas: 12 - Vistas: 10 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 27-02-2016 22:23:41 Hola Walter:

    Lo primero que me llama la atención es la Clave de API. Ya desde la versión 3, las KEY no se utlizan.

    El enlace habitual a Google Maps es
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    Al que le podrás añadir librerías que vayas a utilizar o el lenguaje de uso.
    Por ejemplo, mi etiqueta habitual (adaptado para Argentina) que yo utilizo es:
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=es&amp;region=AR"></script>


    El elemento sensor no tiene mayor importancia ya que le decimos a Google Maps que estamos usando un ordenador (computadora en el caso de ustedes). Si es un móvil deberíamos utilizar sensor true pero no afecta a la visialización (para todos los casos y tipos de página, solemos dejarlo en false).

    Que no te funcione si no tienes conexión (vía wifi o cable) es normal desde el momento que tenemos un enlace externo.

    Si de lo que se trata es de que localice tu posición, está publicado en http://www.phpcentral.com/pregunta/231/aporte-geolocalizacion-de-usuario-w3c cómo obtenerlo. Si quieres pasar estos datos a un mapa de Google, lo tienes en .../mapas/geolocalizacion.html. Está en diseño adaptativo por lo que podrías verlo desde tu móvil.

    Claro está que tendrás que estar conectado a la red, y si está habilitado GPS mejor.

    Nos cuentas.
      Votos: 3 - Link respuesta
     
  • Fecha: 28-02-2016 02:09:13 Hola de nuevo, Walter:

    Hay una opción (no la he probado y no está habilitada para Spain) para Descargar y usar las zonas sin conexión

    Lo que sé (reitero que no lo he probado) permite descargar zonas en un área de 50 Km2.
    Así que su uso está muy limitado o nos vemos obligados a descargar un montón de zonas si estás trabajando entre ... (BsAs y SantaFe por ejemplo -395,94 km en línea recta -).
      Votos: 3 - Link respuesta
     
  • Fecha: 28-02-2016 08:42:47 Muchas Gracias por todas las respuestas que me han brindado.

    Desconocia que no se utilizaban mas las Key, creía que no se veía el mapa porque me faltaba la key.

    La idea es que el script estará hosteado en un hosting.
    Y se pueda acceder desde un móvil con el GPS activo y la conexión a internet no es por wifi sino con internet del proveedor y tomar las coordenadas de donde se encuentre ubicado en ese momento y señalarla en un mapa estático.

    solo se utilizaria en Argentina y en mi región.

    he cambiado
                <script async defer  src="https://maps.googleapis.com/maps/api/js?key=MIKEYAPI">  </script>
    

    por

    sensor=true ya que sera por medio de un movil, segun entendi
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true;language=es;region=AR"></script>
    

    y continúa mostrando



    saludos
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 10:00:35 Walter:

    No he visto tu código pero te dejé un enlace. ¿Lo has probado? ¿Te da el mismo error?

    No obstante, acabo de publicar el aporte Geolocalización W3C mostrada en Google Maps

    Olvídate de sensor=true porque eso no afecta al código Yo lo dejaría en false aunque lo utilice en los smartphones.

    Cualquier duda, pásame tu código completo y los errores que te genera.
      Votos: 2 - Link respuesta
     
  • Fecha: 28-02-2016 10:46:39 Te dejo el codigo

    Uso Jquery a las trompadas jejjee

    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,  maximum-scale=1">
            <title>Donde</title>
            <link href="estilo.css" rel="stylesheet" />  
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true;language=es;region=AR"></script>
    
            <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
            <script type="text/javascript">
                $(document).on('ready', function () {
                    $('#receptor').fadeToggle();
                  
                    //deteccion de cookie habilitado
                    if (navigator.cookieEnabled) {
                        localizar();
                    } else {
                        $('#receptor').html('Debes de tener las Cookies habilitadas');
                        $('#receptor').toggle("linear");
    
                    }
    
                    //GOOGLEMAPS INICIAR
                    function localizar() {
                        // solicitar autorizacion de localizacion al usuario y obtener localizacion si es OK
                        navigator.geolocation.getCurrentPosition(fn_ok, fn_error);
    
                        var divMapa = $('#receptor');
                    }
    
                    function fn_ok(respuesta) {
                        var lat = respuesta.coords.latitude;
                        var lon = respuesta.coords.longitude;
    
                        enviar(lat, lon);
    
    
    
                    }
    
                    function fn_error() {
                        $('#receptor').html('Hubo un problema solicitando los datos');
                        $('#receptor').toggle("linear");
                    }
                    //GOOGLEMAPS FIN
    
    
                    function enviar(latitud, longitud) {
    
                        $('#receptor').html(" <img src='loadingradar.gif'/>");
    
                 
                      // muestra la capa
                        $('#receptor').fadeToggle(1000);
    
                        // uso ajax para pasar los valores grabarPos.php
                        $.post("grabarPos.php", {"lat": latitud, "lon": longitud}, function (respuesta) {
    
                            if (respuesta == "Error") {
                                $('#receptor').html('Hubo un error');
    
                            } else {
                                $('#receptor').html(respuesta);
                                var coordenada = latitud + ',' + longitud; //cooredena por latitud y longitud
                                mapa = '<img id="mapa" src="http://maps.googleapis.com/maps/api/staticmap?size=450x400&markers=' + coordenada + '" />';
                                $('#receptor').append(mapa);
                            }
    
                         
                        });
                    }
                    ;
    
    
    
                });
            </script>
        </head>
        <body>
            <div id="receptor"></div>
    
    
        </body>
    </html>	
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 10:58:59 segun el ejemplo Geolocalización W3C mostrada en Google Maps

    DEMO

    Desde mi movil funciona correctamente.
    En Rango de Error máximo de ubicación: 25.84000015258789 metros.

    al ver el ejemplo de Txema Artzain en mi hosting funcionando bien, esta claro que mi codigo hay algo que esta mal
      Votos: 1 - Link respuesta
     
  • Fecha: 28-02-2016 11:04:17 Mi codigo online
    Probar desde un navegador de un movil con GPS activo y con wifi desactivado.
      Votos: 2 - Link respuesta
     
  • Fecha: 06-03-2016 18:54:50 Hola
    Tengo problemas con javascript.
    cuando hago clic en el boton Guardar me debería ejecutar la función de javascript enviar()
    el cual saldría un alert con la longitud y latitud.
    Pero no se ejecuta la función, en la consola dice: ReferenceError: enviar is not defined.



    Dejo el codigo

    <?php
    require_once 'startup.php';
    ?>
    
    
    <!DOCTYPE html>
    <html lang="es-ES">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="cache-control" content="max-age=0" />
            <meta http-equiv="cache-control" content="no-cache" />
            <meta http-equiv="expires" content="0" />
            <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
            <meta http-equiv="pragma" content="no-cache" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />    
    
            <link rel="stylesheet" href="css/estilo.css">
            <title><?php echo APP_NAME ?></title>
            <link rel="shortcut icon" href="<?php echo BASE_URL; ?>img/favicon.ico" type="image/x-icon">
            <link rel="icon" href="<?php echo BASE_URL; ?>img/favicon.ico" type="image/x-icon">
    
            <script type="text/javascript" src="https://maps.google.com/maps/api/js?language=es"></script>
            <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).on('ready', function () {
    
    
    
                    < !-- //
                            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 = Math.round(position.coords.accuracy);
                        var latlng = new google.maps.LatLng(lat, lng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            icon: 'img/user.png', // null = icon por defecto
                            title: 'Mi posición'
                        });
                        // Se traslada el rango de error al mapa, dibujándolo
                        var circulo = {
                            strokeColor: "#2a4690",
                            strokeOpacity: 0.6,
                            strokeWeight: 5,
                            fillColor: "#8a9cff",
                            fillOpacity: 0.3,
                            geodesic: true, // sobre grandes círculos muestra la variación geodésica
                            map: map,
                            center: latlng,
                            radius: accuracy
                        };
    
                        // Create our info window content   
                        var infoWindowContent = '<div class="info_content">' +
                                '<h3>Geolocalización.</h3>' +
                                '<p>Latitud: ' + lat + '<br> Longitud: ' + lng + '<br>Rango de Error máximo de ubicación: ' + accuracy + ' metros.' + '</p>' +
                                '</div>';
    
                        cityCircle = new google.maps.Circle(circulo)
                        var infowindow = new google.maps.InfoWindow({
                            content: infoWindowContent});
                        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;
                    }
                    ;
            // -->
    
    
                    function enviar() {
                        var lat = position.coords.latitude;
                        var lng = position.coords.longitude;
    
                        $('#mensaje').html(" <img src='img/loader.gif'/>");
    
                        alert(lat+ ' '+ lng);
    
                    };
    
    
    
                });
    
            </script>
        </head>
        <body>
    
            <div id="mapa"></div>
            <div id="mensaje" style="color:#AA0033;"></div>
            <div class="botonera">
                <button class="boton" name="guardar"  onclick="enviar()">Guardar</button>
    
            </div>
        </body>
    </html>
    


    Muchas gracias por la ayuda que me pudieren brindar

    Saludos
      Votos: 1 - Link respuesta
     
  • Fecha: 06-03-2016 22:27:48 Hola Walter:
    Tenemos pequeños errores.

    Por una parte, y para tan poca cosa, no es necesario recurrir a JQuery ya que sobra $(document).on('ready', function () { ... }); cuando tenemos window.onload = function () { ... } y solo se vuelve a utilizar sobre el id "mensaje" al final.

    El otro error que lo tenemos por duplicado tiene que ver con las variables globales y locales (te recomiendo dar un vistazo a http://librosweb.es/libro/javascript/capitulo_4/ambito_de_las_variables.html
    Las variables lat y lng necesitamos hacerlas globales ya que las utilizaremos más adelante en la función enviar. Y, al mismo tiempo, var lat = position.coords.latitude; no puede ser entendida en dicha función ya que no está dentro de function successCallback(position). Pero ello no será necesario si lat y lng las hemos declarado como variables globales (esto es, como lo habíamos hecho con la variable map).

    Dicho todo ello (a lo que he añadido una posición de centrado original del mapa en BsAs, -34.603684, -58.381559), el código javascript quedaría así:
    var map, lat, lng;
    // Controlamos los tiempos respecto a la última petición de geolocalización
    var PositionOptions = {
        timeout: 5000,
        maximumAge: 120000,
        enableHighAccurace: true
    };
    window.onload = function() {
    	var latLng = new google.maps.LatLng(-34.603684, -58.381559);
        // Opciones del tipo de mapa y zoom
        var opciones = {
    		center: latLng,
            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) {
        lat = position.coords.latitude;
        lng = position.coords.longitude;
        var accuracy = Math.round(position.coords.accuracy);
        var latlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: 'img/user.png', // null = icon por defecto
            title: 'Mi posición'
        });
        // Se traslada el rango de error al mapa, dibujándolo
        var circulo = {
            strokeColor: "#2a4690",
            strokeOpacity: 0.6,
            strokeWeight: 5,
            fillColor: "#8a9cff",
            fillOpacity: 0.3,
            geodesic: true, // sobre grandes círculos muestra la variación geodésica
            map: map,
            center: latlng,
            radius: accuracy
        };
    
        // Create our info window content   
        var infoWindowContent = '<div class="info_content">' +
            '<h3>Geolocalización.</h3>' +
            '<p>Latitud: ' + lat + '<br> Longitud: ' + lng + '<br>Rango de Error máximo de ubicación: ' + accuracy + ' metros.' + '</p>' +
            '</div>';
    
        cityCircle = new google.maps.Circle(circulo)
        var infowindow = new google.maps.InfoWindow({
            content: infoWindowContent
        });
        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;
    };
    
    function enviar() {
        document.getElementById('mensaje').inerHTML = " <img src='img/loader.gif'/>";
        alert(lat + ' ' + lng);
    
    };
    </script>
      Votos: 2 - Link respuesta
     
  • Fecha: 07-03-2016 01:32:44 Muchisimas Gracias por tu excelente explicación y por tomarte tu tiempo al hacerlo ;)

    La idea de utilizar JQuery es para luego usar en enviar() AJAX

    A javascript aun estoy lo estoy aprendiendo al mismo tiempo que google maps.

    algo como esto, es una idea aun no implementado:

            function enviar(lat , longitud) {
                $('#mensaje').html(" <img src='img/loader.gif'/>"); // mientras espero que se haga la petición muestro un gif animado 
    
                        $.post("grabarPos.php", {"lat": latitud, "lon": lng}, function (respuesta) {
                             // Una vez obtenido la respuesta de php por ajax reemplazo el gif por el mensaje devuelto 
                            if (respuesta == "Error") {
                                   // Si PHP como respuesta devuelve La palabra Error
                                $('#mensaje').html('Hubo un error');
    
                            } else {
                                  // Si PHP como respuesta no devuelve la palabra Error imprimir la respuesta de PHP
                                $('#mensaje').html(respuesta);
                            }
                        });
                    } ;
    


    Luego podría poner otros botones que hagan otras acciones con javascript.

    Gracias a tu ejemplo sobre google maps he podido utilizarlo y cambiarle algunas cosas básicas que fui aprendiendo como los marker personalizados, etc.

    De apoco ire haciendo algunos cambios al mapa ;)

    Txema Artzain agradezco mucho tu buena predisposición por ayudarme.
      Votos: 1 - Link respuesta
     
  • Fecha: 07-03-2016 02:51:36 Bien, Walter:

    Atendiendo a que quieres o necesitas utilizar JQuery, te envío el código (el enlace a JQuery lo he realizado de forma absoluta) y la necesaria modificación del botón "guardar" (ahora trabajaremos con ID y la función $("#guardar").click(function() eliminando el evento "onclick").
    Como ves, window.onload = function () sobra. Y el tratamiento de lo que tenías como function enviar() también cambia.

    En jQuery
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <script>
    var map, lat, lng;
    $(document).on('ready', function() {
        // Controlamos los tiempos respecto a la última petición de geolocalización
        var PositionOptions = {
            timeout: 5000,
            maximumAge: 120000,
            enableHighAccurace: true
        };
        var latLng = new google.maps.LatLng(-34.603684, -58.381559);
        // Opciones del tipo de mapa y zoom
        var opciones = {
            center: latLng,
            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) {
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            var accuracy = Math.round(position.coords.accuracy);
            var latlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: 'img/user.png', // null = icon por defecto
                title: 'Mi posición'
            });
            // Se traslada el rango de error al mapa, dibujándolo
            var circulo = {
                strokeColor: "#2a4690",
                strokeOpacity: 0.6,
                strokeWeight: 5,
                fillColor: "#8a9cff",
                fillOpacity: 0.3,
                geodesic: true, // sobre grandes círculos muestra la variación geodésica
                map: map,
                center: latlng,
                radius: accuracy
            };
    
            // Create our info window content   
            var infoWindowContent = '<div class="info_content">' +
                '<h3>Geolocalización.</h3>' +
                '<p>Latitud: ' + lat + '<br> Longitud: ' + lng + '<br>Rango de Error máximo de ubicación: ' + accuracy + ' metros.' + '</p>' +
                '</div>';
    
            cityCircle = new google.maps.Circle(circulo)
            var infowindow = new google.maps.InfoWindow({
                content: infoWindowContent
            });
            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;
        };
        $("#guardar").click(function() {
            $('#mensaje').html(" <img src='img/loader.gif'/>");
            alert(lat + ' ' + lng);
    
        });
    });
            </script>

    En HTML:
            <div class="botonera">
                <button class="boton" id="guardar" name="guardar">Guardar</button>
            </div>


    No puedo comprobar la ruta de ajax por lo que ignoro si tienes bien dicha función en el último código.

    Nos cuentas
      Votos: 1 - Link respuesta
     
  • Fecha: 07-03-2016 14:18:02 Txema como siempre muchas gracias por tu colaboración .
    Te he enviado solicitud para agregarte a Skype. Por ese medio te pasare mi email ;)

    1- Si hago clic en Guardar antes que cargue el mapa o bien no comparta mi ubicación el alert sale con lo siguientes valores undefined undefined.
    2- Si el usuario no comparte la ubicación o bien no se haya logrado establecer la ubicación No se debe mostrar el mapa, debería salir un mensaje el el DIV mensaje de dicho problema.
    Por ejemplo si en mi movil desactivo el GPS el mapa no se muestra y debería recordarme que deberia activar el GPS.
    Si no apruebo la solicitud de compartir ubicación deberia notificarme que debo permitirlo.

    En cuanto a grabarPos.php no lo he desarrollado por completo, hice algo básico recién para ir probando.
    Auqnue no lo he chequeado aun.
    <?php
    <?php
    
    date_default_timezone_set("America/Argentina/Buenos_Aires");
    $fechaHora = date("d-m-Y H:i:s");
    
    if (isset($_POST['latitud'], $_POST['longitud'])) {
        if ($_POST["latitud"] && $_POST['longitud']) {
            $rta = $fechaHora . "," . $_POST['latitud'] . "," . $_POST['longitud'];
        } else {
            $rta = 'Error';
        }
    } else {
        $rta = 'Error';
    }
    echo $rta;
    
    
    


    en cuanto a los valores undefined undefined.
    Algo he podido cambiar sin meterme de lleno, te dejo el codigo completo para que vallas viendo si lo deseas, cualquier cambio nuevo que hago te lo publicare.

    <?php
    require_once 'startup.php';
    ?>
    
    
    <!DOCTYPE html>
    <html lang="es-ES">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="cache-control" content="max-age=0" />
            <meta http-equiv="cache-control" content="no-cache" />
            <meta http-equiv="expires" content="0" />
            <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
            <meta http-equiv="pragma" content="no-cache" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />    
    
            <link rel="stylesheet" href="css/estilo.css">
            <title><?php echo APP_NAME ?></title>
            <link rel="shortcut icon" href="<?php echo BASE_URL; ?>img/favicon.ico" type="image/x-icon">
            <link rel="icon" href="<?php echo BASE_URL; ?>img/favicon.ico" type="image/x-icon">
    
            <script type="text/javascript" src="https://maps.google.com/maps/api/js?language=es"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <script>
                var map, lat, lng;
                $(document).on('ready', function () {
                    // Controlamos los tiempos respecto a la última petición de geolocalización
                    var PositionOptions = {
                        timeout: 5000,
                        maximumAge: 120000,
                        enableHighAccurace: true
                    };
                    var latLng = new google.maps.LatLng(-34.603684, -58.381559);
                    // Opciones del tipo de mapa y zoom
                    var opciones = {
                        center: latLng,
                        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) {
                        lat = position.coords.latitude;
                        lng = position.coords.longitude;
                        var accuracy = Math.round(position.coords.accuracy);
                        var latlng = new google.maps.LatLng(lat, lng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            icon: 'img/user.png', // null = icon por defecto
                            title: 'Mi posición'
                        });
                        // Se traslada el rango de error al mapa, dibujándolo
                        var circulo = {
                            strokeColor: "#2a4690",
                            strokeOpacity: 0.6,
                            strokeWeight: 5,
                            fillColor: "#8a9cff",
                            fillOpacity: 0.3,
                            geodesic: true, // sobre grandes círculos muestra la variación geodésica
                            map: map,
                            center: latlng,
                            radius: accuracy
                        };
    
                        // Create our info window content   
                        var infoWindowContent = '<div class="info_content">' +
                                '<h3>Geolocalización.</h3>' +
                                '<p>Latitud: ' + lat + '<br> Longitud: ' + lng + '<br>Rango de Error máximo de ubicación: ' + accuracy + ' metros.' + '</p>' +
                                '</div>';
    
                        cityCircle = new google.maps.Circle(circulo)
                        var infowindow = new google.maps.InfoWindow({
                            content: infoWindowContent
                        });
                        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"
                        }
                        $('#mensaje').html(appErrMessage);
    
                    }
                    ;
                    $("#guardar").click(function () {
                        $('#mensaje').html(" <img src='img/loader.gif'/>");
                        alert(lat + ' ' + lng);
    
                        if (lat === undefined || lng === undefined) {
                            $('#mensaje').html("No he podido establecer su ubicacion");
                        } else {
                            $.post("grabarPos.php", {"latitud": lat, "longitud": lng}, function (respuesta) {
                                $('#mensaje').html(respuesta); // reemplazo el gf loader por la respuesta
                            });
                        }
    
                    });
                });
            </script>
        </head>
        <body>
    
            <div id="mapa"></div>
            <div id="mensaje"></div>
            <div class="botonera">
                <button class="boton" id="guardar" name="guardar">Guardar</button>
            </div>
        </body>
    </html>
    
      Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión