Google Maps en HTML para movil[Resuelta]

Respuestas:

•  

    1  

   

   

  Walter Sánchez Karma: 6600

   
  Fecha: 24-01-2018 13:31:49 Hola Socu
  
  Seria bueno que nos proporciones el codigo completo del html que estas utilizando a fin que se pueda realizar pruebas.
  
  en principio te esta diciendo en Google Maps API warning: NoApiKeys lo siguiente:
  
  
  Link de dicha información
  
  Se requiere Obtener una clave o autenticación aquí más info
  
  Lee dicha documentación del uso de la API asi podras modificar tu codigo con los datos requeridos por Maps JavaScript API para su uso.
  
  Cualquier cosa nos dices
  
  Saludos   Votos: 1 - Link respuesta
   
•  

    2  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 24-01-2018 17:18:07 Hola SoCu:
  
  Por los datos que presentas, la página que tienes se limita a completar los datos para ver desde la página de Google Maps una ruta mostrada por GET y que me permito dudar que sea una buena opción para móvil (yo estoy habituado a generar mis propios mapas en mis páginas).
  

  http://maps.google.com/maps?saddr='+ lat + ',' + lon + '&daddr=' + destino

  
  En este punto puedo decirte que el código de geolocalización para obtener lat/lng de origen es tremendamente simple, máxime si queremos hacerlo funcionar desde móvil donde podemos necesitar que rastree nuestra posición (watch_geolocation()), busque el mejor opción de localización (enableHighAccurace) secuencie el tiempo de rastreo, etc. Algo que no lo veo y que puede justificarse ya que solamente lo utiliza para las coordenadas de origen donde la precisión puede ser menos importante..
  
  Con esa dirección generada de unas coordenadas de origen y una dirección de destino (que supongo lo filtrará Google Maps por geocodificación para hacerla amigable) remite simplemente a Google Maps
  
  Respecto a las dificultades de visualizarlo bien en el móvil, creo que tiene que ver con lo que publicaba en este foro (noticias de noviembre) en google-maps-para-cada-plataforma
  
  Y respecto a la obtención de la KEY_API, que la necesitamos también en páginas para ordenador de escritorio apenas estructuremos un código propio, puedes obtenerla en esta página: Obtener una clave o autenticación
  
  Lo que no he entendido bien es el proyecto en sí, Como te dice Walter, es importante ver el código completo y las observaciones que tengas de lo que hace, lo que no hace y lo que quieres que haga.
  
  Saludos.   Votos: 2 - Link respuesta
   
•  

    1  

   

   

  SoCu Karma: 132

   
  Fecha: 25-01-2018 04:11:23 Hola Walter y Txema muchas gracias por responder, la verdad es que no tengo mucha idea y la mayor parte pruebo códigos, pero no sé porque unos me funcionan con el navegador del pc y luego no me funcionan cuando lo pongo en Android Studio.
  
  El código completo os lo pongo ya mismo en el primer post, tenía intención de ponerlo, pero pensé que la clave estaba en este código que puse antes, y lo mismo al poner tanto código podía liarla, pero tenéis razón.
  
  Amigo Txema si ya me cuesta poner este mapa, como me lie a poner mapas personalizados, entonces sí que la lio, jeje.
  
  La secuencia de rastreo la puse, pero me dijeron que no era necesaria, y bueno como cualquiera de este tema sabe más que yo, pues la quite, pensé que igual al poner el código como esta no era necesaria y por eso me lo dijeron.
  
  Con el post de “Google Maps para cada plataforma” sí que lo vi antes de preguntar, pero me hicieron una pregunta al poner este código en Android, de porque estaba combinando google maps para web con google maps para Android porque son APIs diferentes, le pregunte porque no tenía muy claro lo que me quería decir, y todavía estoy esperando una respuesta, que no creo que me vaya a responder, no tenía claro porque sí que estoy utilizando Android Studio, pero el código que utilizo es para Web, vamos que no voy a crear una clase Activity si no un Fragment para mostrar la página html con el código.
  
  También he probado a poner el Scrip de la página de Google Maps
  
  

          <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=initMap"
                  type="text/javascript"></script>
  

  
  
  Cambiando la función initMap por la función del código que tengo, en una ocasión puse fn_ok() y en otra fn_ok(respuesta), pero ninguna me función.
  
  Antes como no tenía mucha idea de programación, bueno ni tengo, jeje, utilice un programa que convertía las páginas web en aplicación para Android, pero seguía teniendo algunos fallos, y todavía le faltaba mucho por mejorar, así que intento hacer una aplicación para llevar la documentación que necesito para el curro, basado todo en páginas web, uno de esos apartados en crear una especie de navegador gps con los sitios a donde puedo ir, veras en el código de ejemplo que tengo puestas unas coordenadas ya fijadas en unos botones, para poder seleccionar un destino me cree la ruta en el google maps y que me lleve en coche a ese destino.
  
  El caso es que he probado a poner este código en Android Studio y si me ha mostrado el mapa, y no lleva KEY, pero como parece que Android Studio hay que ponerle KEY, pues estoy probando con el otro Scrip.
  Como os digo, esto código no lo utilizo solo lo puse para ver si podía ver donde estaba el fallo con respecto al otro código.
  
  

  <!DOCTYPE html>
  <html>
    <head>
      <title>Simple Map</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <style>
        html, body, #map-canvas {
          margin: 0;
          padding: 0;
          height: 100%;
        }
      </style>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      
      <script>
  var map;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
      </script>
    </head>
    <body>
      <div id="map-canvas"></div>
    </body>
  </html>
  

  
  
  
  Gracias.   Votos: 1 - Link respuesta
   
•  

    2  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 25-01-2018 06:54:11 Lo que estoy viendo es que tienes dos códigos que nada tienen que ver entre ellos y un API_KEY que no encuentras la forma de utilizarlo.
  
  No es tan complicado. Puedo analizar y corregir tus códigos.
  Sobre Geolocalización W3C hay varias entradas publicadas.
  
  El código de tu segundo post tiene no menos de cuatro años, desarrollado desde Australia (que realizaron muchos tutoriales para Google Maps y son muy buenos). Pero en cuatro o seis años que han pasado, han cambiado las cosas.
  
  Es solo una anécdota: new google.maps.LatLng(-34.397, 150.644) corresponde a Firetrail No 1, Avon NSW 2574, Australia.
  
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> actualmente da error en Google Maps, y debería ser, con tu API_KEY:

   
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio"></script>

  
  Es decir, el código que muestras en tu segundo post sería (y observa que el orden de Google Maps ha cambiado completamente de posición, además de la carga asíncrona y la ubicación de los scripts):
  

  <!DOCTYPE html>
  <html>
    <head>
      <title>Simple Map</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <style>
        html, body, #mapa {
          margin: 0;
          padding: 0;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div id="mapa"></div>
      <script>
  var map;
  function inicio() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('mapa'),
        mapOptions);
  };
      </script>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio"></script>
      <script>
    </body>
  </html>

  
  
  Añadir a este mapa: el marcador de la ubicación propia (geolocalización), su seguimiento y la ruta a un destino requiere ... estudiar y desarrollar código.   Votos: 2 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 25-01-2018 07:21:17 No Txwma, eso codigo no vale, creo que me he explicaco mal, ese codigo te lo he puesto porque lo estaba probando y comparando con el que yo quiero utilizar, para ver porque uno funciona en Android Studio y el que yo quiero no funciona, solo lo puse como observación, pero al final creo que la he liado mas.
  
  El codigo que yo intento utilizar lo he puesto en el primer post, he editado el primer post y lo he puesto ahí, ya que me decis que lo que puse antes no aclaraba nada que era mejor poner el codigo que estoy utilizando.
  
  El mismo scrip que tu has puesto en el segundo codigo, lo puse en el codigo del primer post y no se porque no me funciona.
  
  
  Un saludo.   Votos: 0 - Link respuesta
   
•  

    2  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 25-01-2018 09:50:23 Vamos a ver si nos acercamos a lo que quieres.
  
  Partamos de Geolocalización W3C.
  
  Del código comentado linea a línea, lo que nos importa es obtener la latitud y longitud.
  Simplificado, mediante este código, te solicita si quieres que acceda a tu posición para después mostrarte en 2 alert consecutivos tu latitud y tu longitud:
  

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="Geolocalización basada en W3C">
      <title>Geolocalización basada en W3C</title>
    </head>
    <body>
      <section style="text-align:center;">
  	<button type="button" class="button" onclick="initiate_geolocation();">Ver mi posición ahora</button>
  	<br>
      <div id="mensaje" style="color:#FF00AA;"></div>
  	</section>
  <script>
  var watchId;
  var PositionOptions = {
      enableHighAccurace: true,
      timeout: 5000,
      maximumAge: 60000
  };
  
  function initiate_geolocation() {
      if (navigator.geolocation) {
          var watchId = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, PositionOptions);
      } else {
          document.getElementById("mensaje").innerHTML = "Lo sentimos pero el API de Geolocalización de HTM5 no está disponible para su navegador";
      }
  };
  
  function successCallback(pos) {
      var latitude = pos.coords.latitude.toFixed(6);
      alert('Estoy en latitud; ' + latitude);
      var longitude = pos.coords.longitude.toFixed(6);
      alert('Estoy en longitud; ' + longitude);
  };
  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").innerHTML = appErrMessage
  };
  </script>
    </body>
  </html>

  
  
  A partir de aquí, vamos a integrarlo en el mapa.
  Y volvemos a lo ya publicado Geolocalización W3C mostrada en Google Maps
  
  Actualizado a la nueva programación:
  

  <!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>
  html, body {height:100%;}
  #mapa{height:100%;}
  </style>
    </head>
    <body>
      <div id="mensaje" style="color:#FF00AA;"></div>
      <div id="mapa"></div>
  <script>
  var map;
  // Controlamos los tiempos respecto a la última petición de geolocalización
  var PositionOptions = {
      timeout: 5000,
      maximumAge: 120000,
      enableHighAccurace: true
  };
  function inicio() {
      // 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 latlng = new google.maps.LatLng(lat, lng);
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: 'Mi posición'
      });
      var infowindow = new google.maps.InfoWindow({
          content: 'Mi Geolocalización con W3CGeo y HTML5.<br>Latitud: ' + position.coords.latitude.toFixed(6) + '<br> Longitud: ' + position.coords.longitude.toFixed(6)});
      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> 
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio"></script>
    </body>
  </html>

  
  
  El mapa va con la API_KEY que mostrabas en la segunda intervención.
  
  Llee atentamente lo que se va comentando con los dos códigos de referencia.
  
  Y después, nos dices lo que planteaba en mi primera intervención:
  tus observaciones a lo que hace, lo que no hace y lo que quieres que haga.   Votos: 2 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 25-01-2018 12:01:40 Hola Txema, no me da tiempo ahora a probarlo más detenidamente, ha surgido un problemilla y no puedo seguir ahora, mañana hasta medio día no voy a poder ver nada, aunque si comentas algo a ver si puedo desde el trabajo ver algo, pero primero quería comentarte que primer código si me ha mostrado la latitud y longitud en el navegador del pc, pero en el emulador de Android Studio no, ha mostrado un mensaje "error desconocido", su pongo que es por la ventana de alerta que sale mostrando la latitud que no es compatible.
  
  Y el segundo código "Actualizado a la nueva programación:" no muestra nada, debe de ser por la función del scrip "inicio" que no está en el código, eso mismo me pasaba a mi cuando colocaba este scrip del código que yo he puesto, también he probado a poner la función que tiene el código y no funciono.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 25-01-2018 13:17:48 Creo que seguirás teniendo problemas de visualización con Android Studio por dos cuestiones básicas.
  
  Android Studio requiere SDK para correr la aplicación.
  El nivel de lenguaje es la versión de Java con la que se desarrollará la aplicación.
  
  Los códigos que te he puesto corren perfectamente si los abres en el navegador desde cualquier smartphone como página web, no como aplicación.
  
  Lastimosamente no he trabajado en java y por lo general me muevo con HTML5, Javascript/jQuery, PHP y CSS3 responsive.
  
  Estoy trabajando (apenas en los inicios) con manifest.json, que teóricamente nos proporcionaría el icono para acceder desde escritorio a la web correspondiente. Y personalmentee le veo futuro ya que son muchas las opiniones de que "tengo demasiadas aplicaciones y no quiero una más si no es necesaria".
  Si funciona, nos ahorraríamos tener que programar para diferentes sistemas (Android, iOS, etc) y de forma mucho más ligera.
  
  Te invito a que, desde el segundo código que te pasé, trates de verlo desde un smartphone y con cualquier navegador como página web. Sobre los alert, (solamente los trabajo en pruebas, nunca en producción) te sugiero que crees una línea de código y la pases a texto o input type="text". Por ejemplo
  

  Latitud: <span id="latitude"></span>
  <br> 
  Longitud: <span id="longitude"></span>
  <br>
  <span id="mensaje"></span>

    Votos: 0 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 25-01-2018 20:51:45 Hola, te respondo desde el móvil, odio escribir desee el móvil porque cuando pulso una tecla salen cuatro letras :), porque hasta que llegue a casa voy a tardar, por lo menos que veas lo que ha pasado.
  
  Me probado con el segundo código en el navegador del móvil y pasa lo mismo, no muestra nada.
  
  Un código parecido lo tenía puesto en el una aplicación para Android, aunque el código para mostrar el mapa es el mismo, lo único que vambia es la forma de poner las coordenadas, y este código funcionaba en la otra aplicacion.
  
  Este no se porque, porque otros que he puesto para pruebas, como ese que me has conectado de la página esa es inglés han mostrado el mapa.
  
  Aquí veo que el scrip al final llama a una función que no está puesta en tu código, igual puede ser ese el problema.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 26-01-2018 04:41:28 Txema y compañia, como te he comentado esta mañana lo he probado en el movil, el resultado ha sido el miso que en el navegador del PC.
  
  Sobre Androdi y HTML, te puede decir que si que Android funciona utilizando páginas web, ya sea en local como es el caso, o bien estando en un servidor.
  
  Desde la calse Fragment y con webview se pueden mostrar páginas web sin problemas, y como te he comentado hay páginas que he probado como esa que dices que el desarrollador es Australia, que el mapa se muestra sin problemas.
  
  Yo creo que aquí no carga el mapa porque el scrip hace referencia a una función inicio() que me parece que tiene que cargar el mapa, por eso puede ser que esta página no muestra nada, que es lo que está pasando.
  
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio"></script>
  
  Pero aquí ya me pierdo, no sé qué función de las que hay puesta en el código del primer post hay que poner o sustituir a la de inicio()
  
  Editado
  
  Estos codigo los he probado en el navegaro web y en Adrodi Studio y si muestran el mapa.
  
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
      <link href='../img/web.png' rel='shortcut icon' type='image/png'>	
      <title>Calofatti & Asoc - Rutas</title>
      
  
       <link rel="stylesheet" type="text/css" href="../css/consultas.css">
  		<script src=" http://maps.google.com/?file=api&amp;v=2.x&amp;key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMNfNVaqfAe9FKyfKhfBExSs9LrIQ7GOuBeSnaddg05sRmEBxQ"
            type="text/javascript"></script>
          <script type="text/javascript">
          var map;
          var gdir;
          var geocoder = null;
          function load() {
              if (GBrowserIsCompatible()) {
                  map = new GMap2(document.getElementById("map"));	
                  gdir = new GDirections(map, document.getElementById("direcciones"));
                  GEvent.addListener(gdir, "load", onGDirectionsLoad);
                  GEvent.addListener(gdir, "error", mostrarError);	
                  obtenerRuta("Av. Callao 322, Argentina", "Av. Callao 322, Argentina");	
              }
          }
              
          function obtenerRuta(desde, hasta) {
              var i;
              var tipo;
              //comprobar tipo trayecto seleccionado
              for (i=0;i<document.form_ruta.tipo.length;i++){ 
                  if (document.form_ruta.tipo[i].checked){
                      break; 
                  }
              } 
              tipo = document.form_ruta.tipo[i].value;
              if(tipo==1){
                  //a pie
                  gdir.load("from: " + desde + " to: " + hasta,
                      { "locale": "ar", "travelMode" : G_TRAVEL_MODE_WALKING });
              }else{
                  //conduccion
                  gdir.load("from: " + desde + " to: " + hasta,
                      { "locale": "ar", "travelMode" : G_TRAVEL_MODE_DRIVING });
              }
          }
          
          function onGDirectionsLoad(){ 
              //resumen de tiempo y distancia
              document.getElementById("getDistance").innerHTML =gdir.getSummaryHtml(); 
          } 
          
          function mostrarError(){
              if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
                  alert("No se ha encontrado una ubicación geográfica que se corresponda con la dirección especificada.");
              else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
                  alert("No se ha podido procesar correctamente la solicitud de ruta o de códigos geográficos, sin saberse el motivo exacto del fallo.");
              else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
                  alert("Falta el parámetro HTTP q o no tiene valor alguno. En las solicitudes de códigos geográficos, esto significa que se ha especificado una dirección vacía.");
              else if (gdir.getStatus().code == G_GEO_BAD_KEY)
                  alert("La clave proporcionada no es válida o no coincide con el dominio para el cual se ha indicado.");
              else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
                  alert("No se ha podido analizar correctamente la solicitud de ruta.");
              else alert("Error desconocido.");
             
          }
          </script>
          
          <script type="text/javascript">
           function mostrar(){
           document.getElementById('oculto').style.display = 'block';}
           </script>    
  
  		<style>
          div.centerTable{
                  text-align: center;
          }
          
           
          
          div.centerTable table {
                 margin:auto;
                 text-align: left;
          }
          
          </style>
  
    </head>
    <body >
    
      <div id="contenedor" style="width:940px; height:100px; "> 
      
          <div style="width:940px; margin:auto; margin-top:20;"> 
       
           <br><p>Recorrido - Origen - Destino</p><br>
              <form action="#" name="form_ruta" onsubmit="obtenerRuta(this.desde.value, this.hasta.value); return false">
              
                  <div>
                  <label>Desde: </label><input type="text" class="input"  size="25" id="desde" name="desde" value="Domicilio, Argentina" style="width: 355px; padding-left:5px;"/>
                  <label>Hasta: </label><input type="text" class="input"  size="25" id="hasta" name="hasta" value="Domicilio, Argentina" style="width: 355px; padding-left:5px;" /> 
                  <input type="radio" name="tipo" id="tipo" value="2" checked style="visibility:hidden;"> 
                  <input type="radio" name="tipo" id="tipo" value="1" style="visibility:hidden;"> 
                  <input name="ruta" class="button" type="submit" value="Ver Recorrido" onclick="mostrar()"/>
                  
                  </div>
              
              <br>
              <hr style="border:solid 1px #99CCFF; background-color:#99CCFF;">
              
              </form>
  
          <div id='oculto' style='display:none; '><br>
      
      <div style=" border:solid 1px #99CCFF; border-radius:10px; padding:5px;" >
  
  
  			Distancia y tiempo:<br>
             <a style="font-size:8px;">(El recorrido en el mapa es solamente sugerido)</a>
  	</div>	   
          <div id="">
  
              <div id="direcciones" style="width: 450px; float:left;  margin:10px 0px 0px 0px; border:solid 1px #99CCFF; border-radius:10px; padding:5px;"></div>
  
              <div id="map" style="width: 455px; height: 400px; float:left; margin:10px 0px 0px 20px; border:solid 1px #99CCFF; border-radius:10px; "></div>
  
         </div>
  
  	</body>
  </html>
  <script>
  	window.onload=load;
  	window.onunload=GUnload;
  </script>
  </div>
  

  
  
  Este tambien muestra el mapa
  
  

  <!DOCTYPE html>
  <html>
    <head>
      <title>Styled Maps - Night Mode</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
  
      <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() {
          // Styles a map in night mode.
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.674, lng: -73.945},
            zoom: 12,
            styles: [
              {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
              {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
              {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
              {
                featureType: 'administrative.locality',
                elementType: 'labels.text.fill',
                stylers: [{color: '#d59563'}]
              },
              {
                featureType: 'poi',
                elementType: 'labels.text.fill',
                stylers: [{color: '#d59563'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'geometry',
                stylers: [{color: '#263c3f'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'labels.text.fill',
                stylers: [{color: '#6b9a76'}]
              },
              {
                featureType: 'road',
                elementType: 'geometry',
                stylers: [{color: '#38414e'}]
              },
              {
                featureType: 'road',
                elementType: 'geometry.stroke',
                stylers: [{color: '#212a37'}]
              },
              {
                featureType: 'road',
                elementType: 'labels.text.fill',
                stylers: [{color: '#9ca5b3'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry',
                stylers: [{color: '#746855'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry.stroke',
                stylers: [{color: '#1f2835'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'labels.text.fill',
                stylers: [{color: '#f3d19c'}]
              },
              {
                featureType: 'transit',
                elementType: 'geometry',
                stylers: [{color: '#2f3948'}]
              },
              {
                featureType: 'transit.station',
                elementType: 'labels.text.fill',
                stylers: [{color: '#d59563'}]
              },
              {
                featureType: 'water',
                elementType: 'geometry',
                stylers: [{color: '#17263c'}]
              },
              {
                featureType: 'water',
                elementType: 'labels.text.fill',
                stylers: [{color: '#515c6d'}]
              },
              {
                featureType: 'water',
                elementType: 'labels.text.stroke',
                stylers: [{color: '#17263c'}]
              }
            ]
          });
        }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=initMap"
      async defer></script>
    </body>
  </html>
  

  
  
  Y este tambien muestra el mapa el moniftos.
  
  

  !DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <title>Directions service</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;
        }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }
      </style>
    </head>
    <body>
      <div id="floating-panel">
      <b>Start: </b>
      <select id="start">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      <b>End: </b>
      <select id="end">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      </div>
      <div id="map"></div>
      <script>
        function initMap() {
          var directionsService = new google.maps.DirectionsService;
          var directionsDisplay = new google.maps.DirectionsRenderer;
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
          });
          directionsDisplay.setMap(map);
  
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('change', onChangeHandler);
          document.getElementById('end').addEventListener('change', onChangeHandler);
        }
  
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'DRIVING'
          }, function(response, status) {
            if (status === 'OK') {
              directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
      </script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=initMap">
      </script>
    </body>
  </html>
  

  
  
  
  este ultimo codigo muestra e el scrip la funcion initMap() y esta funcion si esta presente en el codigo, el codigo que yo tengo no se que funcion poner para qe funcione.
  
  
  un saludo.
  
    Votos: 0 - Link respuesta
   
•  

    1  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 26-01-2018 05:22:47 Mis disculpas SoCu:
  
  De tanto copiar y pegar ...
  
  Cambia window.onload = function () por function inicio ()
  
  Es de esas pequeñas cosas que se ha modificado en la rutina de trabajo con los códigos de Google Maps.
  
  Ello viene de la carga asíncrona de Google (puede haberse cargado todo el HTML y Google Sigue cargando para llamar después a su función que la hemos llamado inicio), que también prefiere que despleguemos nuestro código antes del enlace a Google y al final del body.
  
  Comprueba que llama a la función callback=inicio, que tendrá que ver con sus códigos pero que a los humanos nos es difícil saber por qué.
  
    Votos: 1 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 26-01-2018 07:38:30 Txema no pasa nada, yo tambien tengo un ajelo con el codigo que estoy probando que he tenido que cambiar todo a una carpeta y empezar de cero.
  
  No se muy bien si solo hay que cambiar todo me refiero a esto [ window.onload = function () ] por esto [ function inicio () ] o solo la parte de la funcion window.onload = function () por window.onload = function inicio ()
  En cualquier caso he probado todo y no funciona, no se si aparte de hay que cambiar algun nombre mas en el resto del codigo, que tambien lo he probado, pero al no funcionar dejo el codigo como estaba.
  
  Te pongo el codigo que he modificado, a ver si es como dices.
  
  

  <!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>
  #mapa{height:100%}
  </style>
    </head>
    <body>
      <div id="mensaje" style="color:#FF00AA;"></div>
      <div id="mapa"></div>
  <script>
  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 inicio() {
      // 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 latlng = new google.maps.LatLng(lat, lng);
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: 'Mi posición'
      });
      var infowindow = new google.maps.InfoWindow({
          content: 'Mi Geolocalización con W3CGeo y HTML5.<br>Latitud: ' + position.coords.latitude.toFixed(6) + '<br> Longitud: ' + position.coords.longitude.toFixed(6)});
      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>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio"></script>
    </body>
  </html>
  

  
  
  
  Pero una cosa, no es mejor probarlo sobre el codigo que tengo que poner ?
  
  Yo a la vez que me dices que modifique algo en los codigos que pones, tambien lo voy probando en el codigo que yo he puesto, no se si estoy haciendo bien, pensando en que son los que pondre con las coordenadas, aunqeu estoy en las mismas, no consigo que funcione.
  
  Un saludo.   Votos: 0 - Link respuesta
   
•  

    1  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 26-01-2018 09:01:13 Tan centrados en el código, a veces se nos olvidan los estilos y el navegador no sabe dónde poner un mapa.
  Lo que te había comentado era que la función no podía ser window.onload = function () ni window.onload = function (inicio) sino function inicio()
  
  
  Bien, Está probado y me es más rápido pasarte el código nuevo que retocar el viejo, aunque quiera hacer el trabajo didáctico que merece el foro. De paso te van altitud, rango de error representado por un pequeño círculo junto al marker y geocoder para identificar la dirección de acuerdo a las coordenadas según le gusta a Google.
  
  Tal cual, y con un mínimo de estilos que sean agradables al smartphone:
  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="geolocalización">
    <title>Geolocalización y altitud</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
  @import url(https://fonts.googleapis.com/css?family=Roboto);
  *{font-family: Roboto;box-sizing: border-box;}
  .cuerpo {text-align:center;width:98%;padding:10px;color: #1E1E1E;}
  fieldset {padding:10px;margin:0;background: #E1E1E1;border:8px solid #4B5AC3;border-radius:0.8em;}
  #mapa {padding:10px;margin:0;height:500px;border:8px solid #4B5AC3;border-radius:0.8em;}
  </style>  
  </head>
  
  <body>
    <header>
    </header>
    <section class="cuerpo">
      <fieldset>
          Latitud: <span style="color:#FF00AA;" id="latitude"></span>
        <br> 
  	    Longitud: <span style="color:#FF00AA;" id="longitude"></span>
        <br> 
  	    Altitud: <span style="color:#FF00AA;" id="altitude"></span>
        <br> 
  	    Dirección: <span style="color:#FF00AA;" id="adress"></span>
  		<input type="hidden" id="adressoculto" name="adressoculto">
        <br>
      	Error máximo de geolocalización: <span style="color:#FF00AA;" id="rangoerror"></span> metros.
        <br>
          <span id="mensaje" style="color:#FF00AA;"></span>
      </fieldset>
  	<br>
      <div id="mapa"></div>
    </section>
    <div style="clear:both;"></div>
    <footer>
    </footer>
    <script>
  function inicio() {
      var myLatlng = new google.maps.LatLng(42.860383, -2.670293);
      var mapOptions = {
          center: myLatlng,
          zoom: 10,
          mapTypeId: 'terrain',
  		streetViewControl: true
      };
      map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
      var elevator = new google.maps.ElevationService;
      var geocoder = new google.maps.Geocoder;
      var infoWindow = new google.maps.InfoWindow;
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(pos) {
              var lat = pos.coords.latitude;
              var latn = Math.abs(lat);
              var latgr = Math.floor(latn * 1);
              var latmin = Math.floor((latn - latgr) * 60);
              var latseg = ((((latn - latgr) * 60) - latmin) * 60);
              var latc = (latgr + "º " + latmin + "' " + latseg.toFixed(2) + '"');
              if (lat > 0) {
                  x = latc + ' N'
              } else {
                  x = latc + ' S'
              }
              var lng = pos.coords.longitude;
              var lngn = Math.abs(lng);
              var lnggr = Math.floor(lngn * 1);
              var lngmin = Math.floor((lngn - lnggr) * 60);
              var lngseg = ((((lngn - lnggr) * 60) - lngmin) * 60);
              var lngc = (lnggr + "º " + lngmin + "' " + lngseg.toFixed(2) + '"');
              if (lng > 0) {
                  y = lngc + ' E'
              } else {
                  y = lngc + ' W'
              }
              var latitude = pos.coords.latitude.toFixed(6) + 'º ( ' + x + 'º )';
              var latitude1 = pos.coords.latitude.toFixed(6);
              $("#latitude").html(latitude);
              var longitude = pos.coords.longitude.toFixed(6) + 'º ( ' + y + 'º )';
              var longitude1 = pos.coords.longitude.toFixed(6);
              $("#longitude").html(longitude);
              var accuracy = pos.coords.accuracy;
              $("#rangoerror").html(accuracy);
              var latlng = {
                  lat: parseFloat(latitude1),
                  lng: parseFloat(longitude1)
              };
              geocoder.geocode({
                  'location': latlng
              }, function(results, status) {
                  if (status === 'OK') {
                      if (results[1]) {
                          map.setZoom(17);
                          $("#adressoculto").val(results[0].formatted_address);
                      }
                  }
              });
              elevator.getElevationForLocations({
                  'locations': [latlng]
              }, function(results, status) {
                  if (status === 'OK') {
                      if (results[0]) {
                          $("#altitude").html(results[0].elevation.toFixed(2) + ' meters.');
                          $("#adress").html(results[0].formatted_address);
                          var myaddress = $("#adressoculto").val();
                          $("#adress").html(myaddress);
  						var icoimagen = {
  						  url: 'images/marker38.png',
  						  size: new google.maps.Size(25, 38),
  						  origin: new google.maps.Point(0, 0),
  						  anchor: new google.maps.Point(13, 38)
  						};
                          var marker = new google.maps.Marker({
                              position: latlng,
                              map: map,
  							icon: icoimagen,
                              title: 'Mi posición'
                          });
                          var circulo = new google.maps.Circle({
                              strokeColor: "#9687A5",
                              strokeOpacity: 0.8,
                              strokeWeight: 1,
                              fillColor: "#9687A5",
                              fillOpacity: 0.3,
                              geodesic: true,
                              map: map,
                              center: latlng,
                              radius: accuracy / 2
                          });
                          var info1 = 'Mi posición<br>Latitud: ' + latitude + '<br>Longitud: ' + longitude + '<br>Altitud: ' + results[0].elevation.toFixed(2) + ' metros.<br> Dirección: ' + myaddress;
                          var infowindow = new google.maps.InfoWindow({
                              content: info1
                          });
                          infowindow.open(map, marker);
                          map.panTo(marker.getPosition());
                      } else {
                          $("#mensaje").html('No se han encontrado resultados');
                      };
                  } else {
                      $("#mensaje").html('Elevation service failed due to: ' + status);
                  };
              });
          }, function() {
              handleLocationError(true, infoWindow, map.getCenter());
          });
      } else {
          handleLocationError(false, infoWindow, map.getCenter());
      }
  };
  
  function handleLocationError(appErrMessage, infoWindow, pos) {
      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);
      infoWindow.setPosition(pos);
      infoWindow.setContent(appErrMessage);
  };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBP0_Q97ayfMYsuDmI3nkV_Mv0SKR6EDzY&callback=inicio">
    </script>
  </body>
  
  </html>

  
  
  Sabes que sigo utilizado tu API_KEY. que solo es válida para tu proyecto/trabajo.
  
  Lo que falta, creo que es para chat. Mi tel. vs. WhatsApp (34 649 675736)
  Correo jmrarbulo@gmail.com.
  
  Si surge (que surgirá) el hacer la ruta, quiero tu compromiso de que abramos un nuevo tema en el foro para cumplir la función didáctica y de coparticipar con experiencia/pruebas que se merece este foro.   Votos: 1 - Link respuesta
   
•  

    0  

   

   

  SoCu Karma: 132

   
  Fecha: 26-01-2018 12:24:25 Gran trabajo Txema, acabo de llegar y no puedo seguir mucho rato, mañana lo miro más despacio e intentó poner el código al que llevo yo en rueda porque sí que he puesto también la función como function inicio(),
  
  Estaba deseando probarlo y tengo que decirte que, si ha funcionado en el pc y el emulador de Android y en el móvil, y como dices con unos pocos detalles se nota una gran diferencia.
  
  El código lo voy a mirar mañana más despacio a ver si le saco punta para hacer funcionar al código que yo tengo.
  
  Como dices que todavía le falta por el tema de crear rutas, seguro que, si voy a tener que preguntar un poco más, no estoy tan puesto como para empezar a volar yo solo, jeje, y naturalmente que creare un post nuevo, pero como termino este post para que aparezca arriba como resuelto, y veo que al final de cada post dice…. Votos: 0 como puedo puntuar tu gran ayuda.
  
  Por cierto, lo que comentas de que la key la puedes utilizar, no sé muy bien si hay que configurar algo más en la página de google maps, pensaba que al asignar un nombre a la key correspondería al nombre que se le dé a la página web, pero al ser una página que se va a utilizar de forma local no se como configurar para que solo se pueda utilizar en la aplicación que yo cree, porque entiendo por tu comentario que a ti no te tendria que permitiría utilizar esa key.
  
    Votos: 0 - Link respuesta