asked on

Having trouble with Google Maps API3 and directions

I have a simple web page to display map directions, in VB.NET with the Google Maps Javascript APIv3.

The map initializes correctly, but will not display the directions from the start point, which is entered into the first Text box.

Help !

Here is the webpage:

http://www.bissegger.ca/skiwakesurf/showlocation-1.aspx

Here is the code:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        
        If Not Page.IsPostBack() Then
            
           ' Load the appropriate language files

            Ttext = MyTools.LoadTranslation(1, "english")

            Dirtitle = TText(39)
            Maptitle = Ttext(40)
            Fromtitle.Text = Ttext(33)
            Destination.Text = Ttext(34) & " SkiWakeSurf"
            Languagetitle = Ttext(35)
            showdirectionsButton = Ttext(41)
            ' printerimage.ImageURL = Ttext(42)

        End If

End Sub

</script>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCvxrS3RoT2guhYGQ7ah1FP2fCzGSvHjoQ&sensor=false">
    </script>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var skiwakesurf = new google.maps.LatLng(45.4047, -73.9557);
        var start = document.getElementById("start").value        

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: skiwakesurf
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            directionsDisplay.setMap(map);
        }

        function calcRoute() {
            var request = {
                origin: start,
                destination: skiwakesurf,
                // Note that Javascript allows us to access the constant
                // using square brackets and a string value as its
                // "property."
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

    </script>
  </head>
  <body onload="initialize()">

  <form id="form1" runat="server">

    
  <table width="780">

    <tr>
        <td width="300">
            <asp:Label id="Fromtitle" style="margin-right: 20px" runat="server" />
            <asp:Textbox id="start" width="200px" runat="server" />
        </td>
        <td width="300">
            <asp:Label id="Destination" runat="server" />
        </td>
        <td rowspan="2" align="right">
            <asp:Imagebutton id="printerimage" OnClientClick="window.print()" />
        </td>          
    </tr>
    <tr>
        <td colspan="2">
            <asp:Label id="languageLabel" style="margin-right: 20px" Text="Language:" runat="server" />
            <asp:DropDownList id="languageselection" runat="server">
                <asp:ListItem id="l1" Text="English" value="en" />
                <asp:ListItem id="l2" Text="Français" value="fr" />
            </asp:DropDownList>
        <asp:Button id="submitButton" runat="server" Text = "Get Directions" OnClientClick="calcRoute()" />
        
        </td>
   </tr>
   </table>

  </form>
  
  <div id="map_canvas" style="width:100%; height:100%"></div> 
  
  </body>
</html>

Open in new window

Thanks for your help, Peter

ASKER CERTIFIED SOLUTION