Tema: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Ver Mensaje Individual
  #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.