Foros del Web » Programando para Internet » Javascript »

Como añadir a este codigo que muestre una marca de google maps "casi esta"

 Estas en el tema de Como añadir a este codigo que muestre una marca de google maps "casi esta" en el foro de Javascript en Foros del Web. Hola amigos, Vereis tengo este codigo que me crea una ruta de un lugar a otro la cosa es que necesito que el punto "A" ...
  #1 (permalink)  
Antiguo 16/07/2013, 03:39
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Como añadir a este codigo que muestre una marca de google maps "casi esta"
Hola amigos,

Vereis tengo este codigo que me crea una ruta de un lugar a otro la cosa es que necesito que el punto "A" aparezca por defecto y se muestre en el mapa y una vez que se introduzca la direccion "B" y pulsemos ya nos cree la ruta

Aqui esta el codigo:

Código HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Displaying text directions with <code>setPanel()</code></title>
    <link href="default.css" rel="stylesheet">
    <style>
      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(37.890054, -4.778567)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}


  var start = 'camino de los sastres 1 ,españa';

function calcRoute() {

  var end = document.getElementById('end').value + ' ,españa';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.WALKING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="control">

<input type="text" id="start" value="">
<input type="text" id="end" value="">
<button onclick="calcRoute();">enviar</button>



    </div>
    <div id="directions-panel"></div>
    <div id="map-canvas"></div>
  </body>
</html>
A ver si alguien sabe como se podria modificar.

Un saludo amigos!!
  #2 (permalink)  
Antiguo 16/07/2013, 04:37
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: Como añadir a este codigo que muestre una marca de google maps "casi esta"
He conseguido poner la marca, la unica cosa es que no la quita cuando enviamos la direccion, he incluido un if: if(document.getElementById('end').value == ''){

Pero no la llega a quitar

El codigo:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Displaying text directions with <code>setPanel()</code></title>
  7.     <link href="default.css" rel="stylesheet">
  8.     <style>
  9.       #directions-panel {
  10.         height: 100%;
  11.         float: right;
  12.         width: 390px;
  13.         overflow: auto;
  14.       }
  15.  
  16.       #map-canvas {
  17.         margin-right: 400px;
  18.       }
  19.  
  20.       #control {
  21.         background: #fff;
  22.         padding: 5px;
  23.         font-size: 14px;
  24.         font-family: Arial;
  25.         border: 1px solid #ccc;
  26.         box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  27.         display: none;
  28.       }
  29.  
  30.       @media print {
  31.         #map-canvas {
  32.           height: 500px;
  33.           margin: 0;
  34.         }
  35.  
  36.         #directions-panel {
  37.           float: none;
  38.           width: auto;
  39.         }
  40.       }
  41.     </style>
  42.     <script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>    
  43.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  44.     <div id="map-canvas"></div>
  45.     <script type="text/javascript">
  46. var directionsDisplay;
  47. var directionsService = new google.maps.DirectionsService();
  48. var latlng = new google.maps.LatLng(37.890054, -4.778567);
  49. var start = latlng;
  50.  
  51. function initialize() {
  52.   directionsDisplay = new google.maps.DirectionsRenderer();
  53.   var mapOptions = {
  54.     zoom: 14,
  55.     mapTypeId: google.maps.MapTypeId.ROADMAP,
  56.     center: latlng
  57.   };
  58.   var map = new google.maps.Map(document.getElementById('map-canvas'),
  59.       mapOptions);
  60.   directionsDisplay.setMap(map);
  61.   directionsDisplay.setPanel(document.getElementById('directions-panel'));
  62.  
  63.   if(document.getElementById('end').value == ''){
  64.  
  65.         var marker = new google.maps.Marker({
  66.             // definimos la poisicion de nuestra marca en el mapa
  67.             position: map.getCenter(),
  68.             map: map,
  69.             // titulo que aparecera cuando pongamos el cursor encima
  70.             title: 'Titulo',
  71.             // aqui encontraras muchos tipos de iconos:
  72.             //http://gmaps-samples.googlecode.com/svn/trunk/markers/
  73.  
  74.             icon: 'http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png',
  75.             cursor: 'default',
  76.             draggable: false
  77.         });  
  78. }
  79.   var control = document.getElementById('control');
  80.   control.style.display = 'block';
  81.   map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  82. }
  83.  
  84.  
  85.  
  86.  
  87.  
  88. function calcRoute() {
  89.  
  90.   var end = document.getElementById('end').value + ' ,españa';
  91.   var request = {
  92.     origin: start,
  93.     destination: end,
  94.     travelMode: google.maps.TravelMode.WALKING
  95.   };
  96.   directionsService.route(request, function(response, status) {
  97.     if (status == google.maps.DirectionsStatus.OK) {
  98.       directionsDisplay.setDirections(response);
  99.     }
  100.   });
  101. }
  102.  
  103. google.maps.event.addDomListener(window, 'load', initialize);
  104.  
  105.     </script>
  106.   </head>
  107.   <body>
  108.     <div id="control">
  109.  
  110. <input type="text" id="start">
  111. <input type="text" id="end">
  112.  
  113. <button onclick="calcRoute();">enviar</button>
  114.  
  115.  
  116.  
  117.     </div>
  118.     <div id="directions-panel"></div>
  119.  
  120.   </body>
  121. </html>

A ver si alguien sabe como se podria quitar al pulsar el boton,

Un saludo!!
Última edición por franjgg; 16/07/2013 a las 04:57
  #3 (permalink)  
Antiguo 16/07/2013, 16:41
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Hola franjgg:
Desde tu código no llego a reproducir la página. Mucho me temo que es por el CSS.
No obstante, permíteme hacer algunas observaciones:

Utilizar v=3.exp de Google Maps, salvo que tengas una razón importante para hacerlo (es la experimental, en este momento 3.13), con el enlace
Código Javascript: 
Ver original
  1. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=es"></script>
accedes a la versión 3.12, estable desde el 19 de febrero de 2013.

No entiendo bien lo de eliminar el marcador (entiendo que personalizado) de end (destino). Si no existe, no hay marcador, y si existe y no lo quiero, ¿para qué crearlo?.

Sobre tu código (aparte de los estilos que he querido configurar en CSS (los tenía creados para pruebas) he definido sobre los inputs los términos de origen y destino para la mejor comprensión. Y si el valor de origen ha de aparecere por defecto (¿Siempre el mismo?) ¿por qué no incluirlo en el valor, e incluso ocultarlo?
Código HTML: 
Ver original
  1. <input type="hidden" id="start" value="37.890054, -4.778567" />

Puedes probar este código de página que creo es lo que quieres:
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>Displaying text directions with <code>setPanel()</code></title>
  7. <style type ="text/css">
  8. html,body{margin:0;padding:0;width:100%;height:100%;font-family:Verdana,Arial,sans serif}
  9. #cuerpo{width:25%;height:100%;float:left;vertical-align:middle;padding:2%}
  10. #map_canvas{width:70%;height:100%;float:right}
  11. #cuerpo input.navi{font-size:18px;width:90%;height:30px;margin-bottom:10px}
  12. #directions-panel{overflow:auto;height:350px}
  13. </style>
  14.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=es"></script>
  15. <script type="text/javascript">
  16. <!-- //
  17. var map;
  18. var directionsDisplay = new google.maps.DirectionsRenderer();
  19. var directionsService = new google.maps.DirectionsService();
  20. window.onload = function () {
  21.     var latlng = new google.maps.LatLng(37.890054, -4.778567);
  22.     var opciones = {
  23.         center: latlng,
  24.         zoom: 14,
  25.         mapTypeId: google.maps.MapTypeId.ROADMAP
  26.     };
  27.     map = new google.maps.Map(document.getElementById('map_canvas'), opciones);
  28. };
  29.  
  30. function calcRoute() {
  31.     var start = document.getElementById('start').value;
  32.     var end = document.getElementById('end').value;
  33.     var request = {
  34.         origin: start,
  35.         destination: end,
  36.         travelMode: google.maps.TravelMode.WALKING
  37.     };
  38.     directionsService.route(request, function (response, status) {
  39.         if (status == google.maps.DirectionsStatus.OK) {
  40.             directionsDisplay.setMap(map);
  41.             directionsDisplay.setPanel(document.getElementById('directions-panel'));
  42.             directionsDisplay.setDirections(response)
  43.         } else {
  44.             alert("No existen rutas entre ambos puntos")
  45.         }
  46.     })
  47. }
  48. // -->
  49. </script>
  50.   </head>
  51.   <body>
  52.     <div id="cuerpo">
  53.       Origen
  54.       <br />
  55.       <input type="text" id="start" value="37.890054, -4.778567" />
  56.       <br/>
  57.       Destino
  58.       <br />
  59.       <input type="text" size="48" id="end" value=""  />
  60.       <input type="submit" name="submit" class="navi" value="Calcular ruta" onclick="calcRoute()" />
  61.       <br/>
  62.       <div id="directions-panel"> </div>
  63.     </div>
  64.     <div id="map_canvas"></div>
  65.   </body>
  66. </html>

Tu <div id="control"> puede serte útil para el estilo de los inputs de entrada de datos.
  #4 (permalink)  
Antiguo 17/07/2013, 01:33
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Hola txemaarbulo,

Ye explico lo del marcador, es por que cuando carga la pagina tiene que poner en el mapa una ubicacion de hay de poner un marcador y cuando buscas algo tiene que quitar ese marcador y mostrar la ruta,

Gracias por la observacion de la V3 lo cambiare,

Habia pensado que para hacer que quite el marcador usar algo asi en lugar del if que puse anteriormente:

if(calcRoute()){

Para que cuando se llame a la funcion que pinta la ruta quite el marcador.

Que te parece, no lo he probado

Un saludo amigo y mil gracias!!
  #5 (permalink)  
Antiguo 17/07/2013, 03:32
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como añadir a este codigo que muestre una marca de google maps
Tu idea es válida pero para que funcione has de recargar la página ya que en la function calcRoute() no comprobará si end.value contiene algo.

El código javascript completo sobre lo que te enviaba, quedaría así:
Código Javascript: 
Ver original
  1. var map;
  2. var directionsDisplay = new google.maps.DirectionsRenderer();
  3. var directionsService = new google.maps.DirectionsService();
  4. window.onload = function () {
  5.     var latlng = new google.maps.LatLng(37.890054, -4.778567);
  6.     var opciones = {
  7.         center: latlng,
  8.         zoom: 14,
  9.         mapTypeId: google.maps.MapTypeId.ROADMAP
  10.     };
  11.     map = new google.maps.Map(document.getElementById('map_canvas'), opciones);
  12.     if (document.getElementById('end').value == '') {
  13.       var imagen = new google.maps.MarkerImage('http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32), new google.maps.Size(20, 32));
  14.       var marker = new google.maps.Marker({
  15.         position: latlng,
  16.         map: map,
  17.         title: 'Titulo',
  18.         icon: imagen
  19.       });
  20.     }
  21. };
  22.  
  23. function calcRoute() {
  24.     var start = document.getElementById('start').value;
  25.     var end = document.getElementById('end').value;
  26.     var request = {
  27.         origin: start,
  28.         destination: end,
  29.         travelMode: google.maps.TravelMode.WALKING
  30.     };
  31.     directionsService.route(request, function (response, status) {
  32.         if (status == google.maps.DirectionsStatus.OK) {
  33.             directionsDisplay.setMap(map);
  34.             directionsDisplay.setPanel(document.getElementById('directions-panel'));
  35.             directionsDisplay.setDirections(response)
  36.         } else {
  37.             alert("No existen rutas entre ambos puntos")
  38.         }
  39.     });
  40.     window.onload();
  41. }

Muy importante window.onload(); al final de la function calcRoute()
  #6 (permalink)  
Antiguo 17/07/2013, 03:57
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Me corrijo (la imagen del marker ha de corresponder y ajustarse a la punta inferior central, pudiendo redimensionarse)
Código Javascript: 
Ver original
  1. var imagen = new google.maps.MarkerImage(
  2.         'http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png',
  3.          /* La ruta donde se encuentra la imagen. Puede ser absoluta o relativa a la posición de la página. */
  4.         new google.maps.Size(31, 41),
  5.         /* El tamaño de la imagen completa después de la escala, si se redimensiona. Utilice esta propiedad para ampliar o reducir una imagen. */
  6.         new google.maps.Point(0, 0), 
  7.         /* La posición de la imagen dentro de un sprite, si los hay. Por defecto, el origen se encuentra en la esquina superior izquierda de la imagen (0, 0). */
  8.         new google.maps.Point(16, 41),
  9.         /* La posición en la que anclar una imagen en correspondencia a la localización del marcador en el mapa. Por defecto, el ancla está situado a lo largo del punto central de la parte inferior de la imagen. */ 
  10.         new google.maps.Size(31, 41)
  11.        /* El tamaño de la pantalla del sprite o imagen. Al usar sprites, debe especificar el tamaño de sprite. Si el tamaño no se proporciona, se establece cuando se carga la imagen. */
  12.       );

En tu caso y si no la redimensionamos, puede ser simplemente:
Código Javascript: 
Ver original
  1. var marker = new google.maps.Marker({
  2.         position: latlng,
  3.         map: map,
  4.         title: 'Titulo',
  5.         icon: 'http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png'
  6.       });
Y eliminamos var imagen
  #7 (permalink)  
Antiguo 17/07/2013, 04:10
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Hola txemaarbulo,

Queda estupendo.

Es exactamente lo que necesitaba, solo me queda agradecerte la atencion y darte la gracias,

Me has ayudado mucho amigo.

Gracias de nuevo!!

Etiquetas: google, html, input, js, maps, marca
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:17.