Google Maps not showing route
Question
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>
2 answers
solution1
0 2016-05-01 18:36:59
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>
solution2
0 2017-02-21 01:04:37
Please try my aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search Route Direction</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<%--Getting User Current Location--%>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("There is Some Problem on your current browser to get Geo Location!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var city = position.coords.locality;
var LatLng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: LatLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "
+ lat + +"<br />Longitude: " + long
});
marker.setMap(map);
var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" +
lat + "<br /> Longitude:" + long + ""
});
getInfoWindow.open(map, marker);
}
</script>
<%--Getting Route Direction From User Current Location to Destination--%>
<script type="text/javascript">
function SearchRoute() {
document.getElementById("MyMapLOC").style.display = 'none';
var markers = new Array();
var myLatLng;
//Find the current location of the user.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var m = {};
m.title = "Your Current Location";
m.lat = p.coords.latitude;
m.lng = p.coords.longitude;
markers.push(m);
//Find Destination address location.
var address = document.getElementById("txtDestination").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
m = {};
m.title = address;
m.lat = results[0].geometry.location.lat();
m.lng = results[0].geometry.location.lng();
markers.push(m);
var mapOptions = {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array.
var path = new google.maps.MVCArray();
//Getting the Direction Service.
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color.
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP.
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
} else {
alert("Invalid location.");
window.location.href = window.location.href;
}
});
}
}
} else {
alert("Request failed.")
}
});
});
}
else {
alert('Some Problem in getting Geo Location.');
return;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="border: solid 15px blue; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue;
text-align: center; font-family: Verdana; font-size: 20pt; color: Green;">
Draw Route Between User's Current Location & Destination On Google Map
</td>
</tr>
<tr>
<td style="background-color: skyblue; text-align: center; font-family: Verdana; font-size: 14pt;
color: red;">
<b>Enter Destination:</b>
<input type="text" id="txtDestination" value="" style="width: 200px" />
<input type="button" value="Search Route" onclick="SearchRoute()" />
</td>
</tr>
<tr>
<td>
<div id="MyMapLOC" style="width: 550px; height: 470px">
</div>
<div id="MapRoute" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
google maps directions service not showing route
Google maps javascript: Showing route on half map
Google Maps API V3 - Showing progress along a route
Google Maps not showing route when building from latitude and longitude values
Midpoint of route in google maps
google maps displaying a route
google maps route in ASP
simulate route on Google maps
Google Maps Load Route
Maps marker is not showing in Google Maps?
Related Tags