Question sur Google Map obtenir le service de direction V3

Question

Je veux utiliser le service de Direction de Google Maps pour mon site Web. Comme je l'utilise la première fois, je ne sais pas comment commencer. Un bon exemple de code qui est exactement ce que je veux est ici: Direction example Lorsque je le télécharge et que je cours dans mon navigateur (n'importe quel navigateur) pour obtenir le deal, la carte est rendue seulement un moment et s'en va! Je ne sais pas pourquoi ?! Et deuxième question: Y at-il un exemple que vous connaissez?

Merci beaucoup à l'avance

Answer 1

Pour dessiner la route sur la carte, cliquez sur la carte deux fois pour la route créée sur deux que les points

var map; 
    var infowindow = new google.maps.InfoWindow(); 
    var wayA; 
    var wayB; 
    var geocoder = new google.maps.Geocoder(); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
     suppressMarkers: true, 
     panel: document.getElementById('right-panel'), 
     draggable: true 
    }); 
    var directionsService = new google.maps.DirectionsService(); 
    var data = {}; 
    initMap(); 
    function initMap() { 
     debugger; 
     map = new google.maps.Map(document.getElementById('rmap'), { 
      center: new google.maps.LatLng(23.030357, 72.517845), 
      zoom: 15 
     }); 


     google.maps.event.addListener(map, "click", function (event) { 
      if (!wayA) { 
       wayA = new google.maps.Marker({ 
        position: event.latLng, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000" 
       }); 
       // calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB); 
      } else { 
       if (!wayB) { 
        debugger; 
        wayB = new google.maps.Marker({ 
         position: event.latLng, 
         map: map, 
         icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000" 
        }); 

        calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB); 
       } 
      } 
     }); 
    } 
    function computeTotalDistance(result) { 
     var total = 0; 
     var myroute = result.routes[0]; 
     for (var i = 0; i < myroute.legs.length; i++) { 
      total += myroute.legs[i].distance.value; 
     } 
     total = total/1000; 
     return total; 
    } 
    function computeTotalDuration(result) { 
     var total = 0; 
     var myroute = result.routes[0].legs[0].duration.text; 
     return myroute; 
    } 
    function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) { 
     debugger; 
     directionsDisplay.setMap(map); 
     // directionsDisplay.setPanel(document.getElementById('dvPanel')); 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
      debugger; 
      calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB); 
     }); 
     directionsService.route({ 
      origin: wayA.getPosition(), 
      destination: wayB.getPosition(), 
      optimizeWaypoints: true, 
      travelMode: 'DRIVING' 
     }, function (response, status) { 
      if (status === 'OK') { 
       debugger; 

       var route = response.routes[0]; 
       wayA.setMap(null); 
       wayB.setMap(null); 
       pinA = new google.maps.Marker({ 
        position: route.legs[0].start_location, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000" 
       }), 
       pinB = new google.maps.Marker({ 
        position: route.legs[0].end_location, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000" 
       }); 

       google.maps.event.addListener(pinA, 'click', function() { 
        infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location); 
        infowindow.open(map, this); 
       }); 
       google.maps.event.addListener(pinB, 'click', function() { 
        debugger; 
        infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " + computeTotalDistance(directionsDisplay.getDirections()) + " Km <br/><b>Travel time=</b> " + computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " + route.legs[0].end_location); 
        infowindow.open(map, this); 
       }); 

      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
      directionsDisplay.setDirections(response); 
     }); 
    }