javascript - google maps directions service not showing route -
i used simple directions service api sample provided google maps api, while map seem adjust show 2 different points, there no route or markers plotted.
here have:
var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; function initialize(data) { directionsdisplay = new google.maps.directionsrenderer(); var chicago = new google.maps.latlng(41.850033, -87.6500523); var mapoptions = { zoom:7, center: chicago }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); directionsdisplay.setmap(map); } function calcroute() { var start = "chicago, il"; var end = "st louis, mo"; var request = { origin:start, destination:end, travelmode: google.maps.travelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } }); } <div style="height: 25rem; width: 40rem;" id="map-canvas"></div> what missing in code display default markers , route line?
thanks lot
you must call calcroute() somewhere after initialization.. can @ end of initialization(); example:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>directions service</title> <style> 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; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> 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, center: chicago }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); directionsdisplay.setmap(map); calcroute(); } function calcroute() { var start = "chicago, il"; var end = "st louis, mo"; var request = { origin:start, destination:end, travelmode: google.maps.travelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
Comments
Post a Comment