Having trouble with Google Maps API3 and directions

Posted on 2012-08-13
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:

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


<!DOCTYPE html>
    <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% }
    <script type="text/javascript"
    <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);

        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) {

  <body onload="initialize()">

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

  <table width="780">

        <td width="300">
            <asp:Label id="Fromtitle" style="margin-right: 20px" runat="server" />
            <asp:Textbox id="start" width="200px" runat="server" />
        <td width="300">
            <asp:Label id="Destination" runat="server" />
        <td rowspan="2" align="right">
            <asp:Imagebutton id="printerimage" OnClientClick="window.print()" />
        <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:Button id="submitButton" runat="server" Text = "Get Directions" OnClientClick="calcRoute()" />

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

Open in new window

Thanks for your help, Peter
Question by:pbissegger
    LVL 13

    Accepted Solution

    i have made like this in v2:
    <script language="javascript" type="text/javascript">
         var map = null;
         var utdiv=null;
    //    function load() 
    //    {
          if (GBrowserIsCompatible()) 
    	  function createMarker(point) {	  
    	    var blueIcon = new GIcon(G_DEFAULT_ICON);
    		blueIcon.image = "images/Company.png";
    		blueIcon.iconSize = new GSize(48, 48);
    		markerOptions = { icon:blueIcon };
            var marker = new GMarker(point, markerOptions);
            return marker;
            map = new GMap2(document.getElementById("routemap"));
            map.setCenter(new GLatLng(47.18046663619187,23.05553913116455), 17);
    		var point = new GLatLng(47.18046663619187,23.05553913116455);
            var marker = createMarker(point);
            utdiv = new GDirections(map, document.getElementById("direction"));
            utvonal("Piata Mihai Viteazu, Cluj-Napoca");
    //    }
        function utvonal(stop) 
          utdiv.load("from: " + "47.18046663619187,23.05553913116455" + " to: " + stop,{"locale":"ro_RO", "getSteps":true,"avoidHighways":false});  
     <div id="calcroute" style="margin-top:2px; margin-left:200px;">
      <p style="padding-top:6px;"></p><span class="style7">Calculeaza ruta catre noi /</span>
      <span class="style7" ><a href="#container" class="scrollPage" > Date de contact </a>/</span>
      <span class="style7"><a href="#contactforms" class="scrollPage" >Trimite mesaj</a></span>
      <hr style="color:#E8E8E8;"/>
     			<input type="text" name="addres2" id="stop" value="ex: Piata Mihai Viteazu, Cluj-Napoca" style="width: 250px; position: static" onblur="if(this.value=='') this.value='ex: Piata Mihai Viteazu, Cluj-Napoca';" onfocus="if(this.value=='ex: Piata Mihai Viteazu, Cluj-Napoca') this.value='';"/>
    			 <input name="Calculeaza" value="Calculeaz&#259;" type="button" onclick="utvonal(document.getElementById('stop').value)" />
      			<div id="routemap" style="width: 680px; height: 300px"></div> 
    		    <div id="direction" style="width: 680px; height: 400px; overflow:auto;"></div> 
    			 <input name="Calculeaza" value="Calculeaz&#259;" type="button" onclick="utvonal(document.getElementById('stop').value)" />

    Open in new window

    hope it helps
    LVL 12

    Assisted Solution

    You appear to be pulling a value from a field on page load before anything has been entered into it. It seems as though after you've typed the value into the "start" field and pressed submit the page is reloaded and the previous value has gone from the field , it's at this point that your javascript is getting the value from the field.

    I would be inclined to pull the value from this field purely using javascript instead of submitting a form.
    LVL 13

    Assisted Solution

    by:Molnar István
    Make your server variable as Public Property

    and access it in java script as

     var Variable = '<%= ServerVaraible %>';

    Try this, i hope it will work

    Author Comment

    Thanks everyone.

    I have moved forward with the Google Maps API v2 because version 3 is a dog. Incorporating your help, it now works

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    Introduction This article is designed to assist GIS (Geographic Information System) and GPS (Global Positioning System) developers using ESRI ArcGIS and other spatial information management systems.   For the uninitiated the concept of projectio…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now