• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1047
  • Last Modified:

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
0
pbissegger
Asked:
pbissegger
  • 2
3 Solutions
 
Molnar IstvánHelpDesk / ProgrammerCommented:
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
0
 
ChrisCommented:
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.
0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
Make your server variable as Public Property

and access it in java script as

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

Try this, i hope it will work
0
 
pbisseggerAuthor 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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now