We help IT Professionals succeed at work.
Get Started

Having trouble with Google Maps API3 and directions

1,117 Views
Last Modified: 2012-08-14
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
Comment
Watch Question
HelpDesk / Programmer
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 3 Answers and 4 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE