Tema: Como añadir a este codigo que muestre una marca de google maps "casi esta"
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/07/2013, 04:37
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 9 meses
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