HTML - navigator.geolocation.getCurrentPosition

 
Vista:

navigator.geolocation.getCurrentPosition

Publicado por luis (3 intervenciones) el 04/07/2017 15:45:09
Hola Chicos :

Intento hacer que el siguiente html en vez de centar en unas posiciones concretas ( center: {lat: 34.04924594193164, lng: -118.24104309082031} )

me localice y utilice mi ubicacion para darme la posición y referencia de trafico.

Gracias de ante mano

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 34.04924594193164, lng: -118.24104309082031}
        });
 
        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 74
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

navigator.geolocation.getCurrentPosition

Publicado por txema (22 intervenciones) el 05/07/2017 05:32:14
Hola Luis:
Para que la geoloalización te localice tienes que añadir a tu Javascript el código de geolocalización.
El Javascript quedaría así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: {
            lat: 34.04924594193164,
            lng: -118.24104309082031
        }
    });
    var infoWindow = new google.maps.InfoWindow({
        map: map
    });
 
    // Geolocalización HTML5.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
 
            infoWindow.setPosition(pos);
            infoWindow.setContent('Ubicación encontrada.');
            map.setCenter(pos);
        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        // El navegador no admite Geolocalización
        handleLocationError(false, infoWindow, map.getCenter());
    }
 
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
}
 
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
        'Error: El servicio de Geolocalización falló.' :
        'Error: Su navegador no admite geolocalización.');
}
</script>

Por su parte, el enlace a https://maps.googleapis.com ... debe contener el API_KEY para tu proyecto.
Lo puedes obtener aquí (obtén una clave)

Podría precisarte más los tipos de errores de geoloalización que puedes encontrar pero con lo expuesto, debería funcionar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

navigator.geolocation.getCurrentPosition

Publicado por luis (3 intervenciones) el 05/07/2017 09:56:41
Gracias Crack funciona perfectamente mira que estuve rompiéndome la cabeza con cosas parecidas

Merci
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar