``I can't find directions on Google Maps``

Question

``I can't find directions on Google Maps``

I'm having trouble displaying a route between two markers on the map. Currently, the map keeps defaulting to the location of Ireland and not showing the intended route.

public string DrawMapDirections(string Start,string End,string[] WayPoints)
{
    // Map code here 
}

The start and end points are passed through this function:

GoogleMap gm = new GoogleMap();
html += gm.DrawMapDirections(start, end, waypoints.ToArray());

For example, the start point could be: Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM.

No errors are being displayed, so it's unclear why the route is not showing up.

Here's what the map script returns:

<script>
// Map script content
</script>

javascript asp.net google-maps

Answer 1

Answer №1

It seems like your code is correct. I tested it with a snippet and received a "NOT FOUND" status from the route request. The snippet below shows the route when changing the starting point to an address that Google Maps can locate.

If you have the latitude and longitude of the starting point, you can use that directly. Otherwise, you'll need to input an address known to the direction service.

<!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>

Answer 2

It seems like your code is correct. I tested it with a snippet and received a "NOT FOUND" status from the route request. The snippet below shows the route when changing the starting point to an address that Google Maps can locate.

If you have the latitude and longitude of the starting point, you can use that directly. Otherwise, you'll need to input an address known to the direction service.

<!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>

Answer 3

Answer №2

Please check out the following 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">
...
...

Answer 4

Please check out the following 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">
...
...

``I can't find directions on Google Maps``

Answer №1

Answer №2

Similar questions

Highchart mortgage calculator for accurate financial planning

Creating a Node.js application using Express requires careful consideration of file structure and communication methods

Change a space-separated string containing coordinates into an array of JavaScript objects

I could really use some guidance on how to begin with the Node.JS app file in BlueMix

Automating the process of uploading a file to a Github repository using JavaScript and HTML

Using Selenium WebDriver to handle Angular requests in Java

Ways to stop the transmission of the Origin HTTP header in the Chrome browser?

using a function as an argument in the map method within a React component

Ensure that an input field on the PHP form is required

Display HTML content using JavaScript only when a checkbox is selected

When the CSS animation has finished in JavaScript

Error encountered in C# ML.NET ProjectToPrincipalComponents - System.ArgumentOutOfRangeException: 'Input column schema does not match'

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

Issue with Three.js: The mouse hover effect does not revert back to the previous color

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

The response from Ajax is being duplicated with each click

Implementing a dual hover effect on a Div element

Exploring the process of updating the NavigateURL of a HyperLink when clicked

Sending database data from PHP to JavaScript - mysql_fetch_array behaving unexpectedly