I am trying to show a route between two markers, but the map is always just showing the default location of Ireland and isn't showing the route
public string DrawMapDirections(string Start,string End,string[] WayPoints) { string map = "<script type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"></script>" + "<script>" + "var rendererOptions = { "+ "draggable: true "+ "}; " + "var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); " + " var directionsService = new google.maps.DirectionsService(); " + " var map; " + "function initialize() { " + "var ireland = new google.maps.LatLng(53.085222, -7.558594); " + //Default Ireland " var mapOptions = { " + " zoom: 7, " + " mapTypeId: google.maps.MapTypeId.ROADMAP," + " center: ireland " + "}; " + "map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); " + "directionsDisplay.setMap(map); " + "directionsDisplay.setPanel(document.getElementById('directionsPanel'));" + "google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { " + "computeTotalDistance(directionsDisplay.directions); "+ "}); "+ //Call calcRoute " calcRoute();" + "}" + "function calcRoute() { " + "var start = '" + Start.Replace("'", "") + "'; " + "var end = '" + End.Replace("'", "") + "'; " + "var waypts = []; "; foreach (string s in WayPoints) { map += "waypts.push({ " + "location:'" + s.Replace("'","") + "'}); "; } map += "var request = { " + "origin: start, " + "destination: end, " + "waypoints: waypts, " + "optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, " + "durationInTraffic:document.getElementById('chkDurationInTraffic').checked , " + "provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked," + "avoidHighways: document.getElementById('chkAvoidHighWays').checked," + "avoidTolls: document.getElementById('chkAvoidTolls').checked, " + "travelMode: google.maps.DirectionsTravelMode.DRIVING " + "}; " + "directionsService.route(request, function(response, status) { " + "if (status == google.maps.DirectionsStatus.OK) {" + "directionsDisplay.setDirections(response);" + "var route = response.routes[0];" + "}" + "});" + " }" + "function computeTotalDistance(result) { "+ "var total = 0; "+ "var myroute = result.routes[0]; " + "for (i = 0; i < myroute.legs.length; i++) { "+ "total += myroute.legs[i].distance.value; "+ "} "+ "total = total / 1000; "+ "document.getElementById('total').innerHTML = total + ' km'; "+ "} "+ "</script>"; return map; } The start and end points get passed through this function:
GoogleMap gm = new GoogleMap(); html += gm.DrawMapDirections(start, end, waypoints.ToArray()); so for example the start could be something like - Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM.
I'm not getting any errors so I don't know why it doesn't display the route
Ok here's the what map returns:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map; function initialize() { var ireland = new google.maps.LatLng(53.085222, -7.558594); var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: ireland }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute() ;} function calcRoute() { var start = 'Unit 2, Hendy Industrial Estate, Hendy, SWANSEA, SA4 0XP, West Glamorgan, UNITED KINGDOM'; var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; var waypts = []; var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, durationInTraffic:document.getElementById('chkDurationInTraffic').checked , provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked, avoidHighways: document.getElementById('chkAvoidHighWays').checked,avoidTolls: document.getElementById('chkAvoidTolls').checked, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response);var route = response.routes[0];}}); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000; document.getElementById('total').innerHTML = total + ' km'; } </script> 1 Answers
Answers 1
Your code looks correct to me. I created a snippet with your code and I got back a "NOT FOUND" status from the route request. The route is displayed (in the snippet below) if I change the starting point to an address that Google Maps can find.
If you know the latitude and longitude of the starting point, you can use that, otherwise you will need to have an address that the direction service has knowledge of.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Direction Service Example</title> </head> <body> <div id="map_canvas" style="width: 600px;height: 600px"></div> <script> var map; var directionsDisplay; var directionsService; function initialize() { var ireland = new google.maps.LatLng(53.085222, -7.558594); var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: ireland }; directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }); directionsService = new google.maps.DirectionsService(); map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); } function calcRoute() { var start = 'Hendy Industrial Estate, Hendy, Pontarddulais, Swansea, Carmarthenshire SA4 0XP, UK'; var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; var waypts = []; var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: false, durationInTraffic: true, provideRouteAlternatives: true, avoidHighways: false, avoidTolls: false, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; } }); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000; document.getElementById('total').innerHTML = total + ' km'; } </script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> </body> </html>
0 comments:
Post a Comment