Google दिशानिर्देश मार्ग पर InfoWindow जोड़ना

Question

मैं दिशा निर्देशों में एक इन्फॉइंडो जोड़ने की कोशिश कर रहा हूं, मार्कर पर किसी ईवेंट श्रोता पर infowindow जोड़ने के लिए वहां कई उदाहरण हैं लेकिन मैं वास्तविक योजना पर दिखाने के लिए जानकारी कैसे चला सकता हूं एक मार्कर से दूसरे तक मार्ग। किसी ने पहले ही इस सवाल से पहले पूछने की कोशिश की लेकिन कोई प्रतिक्रिया नहीं (infoWindow on Directions Route), वैसे भी मैंने बहुत सारे गुगलिंग किए और केवल इसी तरह के एक प्रश्न को पाया लेकिन फिर से इसकी कोई प्रतिक्रिया नहीं है। मैंने कॉलबैक में मार्कर पर एक ईवेंट पर infowindow.open (नक्शा, यह) की कोशिश की लेकिन यह मार्कर स्थिति पर infowindow खोल देगा .. बस मैं Google की तरह अवधि और दूरी दिखाना चाहता हूं .. कुछ संलग्न छवि में

var infowindow2 = new google.maps.InfoWindow(); 
distanceService.getDistanceMatrix(distanceRequest, function (response, status) { 
    if (status == "OK") { 
     infowindow2.setContent(response.rows[0].elements[0].distance.text + "<br>" + response.rows[0].elements[0].duration.text + " ") 
    } 
    else { 
     alert("Error: " + status) 
    } 
    }) 
infowindow2.open(map, this); 

Answer 1

एक मार्ग पर एक स्थिति का पता लगाने और वहाँ एक infoWindow में कहें, मार्ग (the details are described in the documentation) पार्स। मार्ग के साथ एक स्थान प्राप्त करें और उस स्थिति के साथ अपने infowindow की setPosition विधि को कॉल करें।

function calcRoute(start, end) { 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var step = 1; 
     var infowindow2 = new google.maps.InfoWindow(); 
     infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " "); 
     infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location); 
     infowindow2.open(map); 
    } 
    }); 
} 

proof of concept fiddle

कोड स्निपेट:

var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 

 
    var mapOptions = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: chicago 
 
    } 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    calcRoute("67 The Windmill Hill, Allesley, Coventry CV5 9FR, UK", "26 Rosaville Crescent, Allesley, Coventry CV5 9BP, UK"); 
 
} 
 

 
function calcRoute(start, end) { 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     var step = 1; 
 
     var infowindow2 = new google.maps.InfoWindow(); 
 
     infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " "); 
 
     infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location); 
 
     infowindow2.open(map); 
 
    } 
 
    }); 
 
} 
 

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

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

[गूगल मैप्स CLI की