We help IT Professionals succeed at work.

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
Comment
Watch Question

HelpDesk / Programmer
CERTIFIED EXPERT
Commented:
i have made like this in v2:
--------------------javascript---------------------------------------
<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);
        map.setUIToDefault();
		var point = new GLatLng(47.18046663619187,23.05553913116455);
        var marker = createMarker(point);
        map.addOverlay(marker);
        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});  
    }
</script>
----------------------html--------------------------

 <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> 
</div><!--calcroute--> 
			 <input name="Calculeaza" value="Calculeaz&#259;" type="button" onclick="utvonal(document.getElementById('stop').value)" />

Open in new window


hope it helps
Commented:
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.
Molnár IstvánHelpDesk / Programmer
CERTIFIED EXPERT
Commented:
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

Commented:
Thanks everyone.

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

Explore More ContentExplore courses, solutions, and other research materials related to this topic.