在不使用地图的情况下使用Google Maps api获取方向

Question

Hi I'm playing around with a frontend project which will have no backend and I want it to get transit direction from a specific place to another.

The problem I have is that google maps api for browser does always have to use a map if I'm correct.

I just want to show eg 3 next bus from this bus stop.

It so much documentation on different things and I'm not sure which api to use. Could I use server api?

Any google api pro out there who could help me?

thanks!

Answer 1

A map is not required. The Google Maps Javascript API v3 DirectionsService can just render the text directions in the "panel" (an HTML div).

From the documentation :

setPanel(panel:Node) | Return Value: None This method renders the directions in a . Pass null to remove the content from the panel.

code snippet: (modified from this example in the documentation )

 function initMap() { var directionsDisplay = new google.maps.DirectionsRenderer; var directionsService = new google.maps.DirectionsService; directionsDisplay.setPanel(document.getElementById('right-panel')); var onChangeHandler = function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }; document.getElementById('start').addEventListener('change', onChangeHandler); document.getElementById('end').addEventListener('change', onChangeHandler); calculateAndDisplayRoute(directionsService, directionsDisplay); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { var start = document.getElementById('start').value; var end = document.getElementById('end').value; directionsService.route({ origin: start, destination: end, travelMode: google.maps.TravelMode.TRANSIT }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", initMap); 

 html, body { height: 100%; margin: 0; padding: 0; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="floating-panel"> <strong>Start:</strong> <select id="start"> <option value="chicago, il">Chicago</option> <option value="st louis, mo">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option> <option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option> </select> <br> <strong>End:</strong> <select id="end"> <option value="chicago, il">Chicago</option> <option value="st louis, mo" selected="selected">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option> <option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option> </select> </div> <div id="right-panel"></div>