?
Solved

Having trouble with Google Maps API3 and directions

Posted on 2012-08-13
4
Medium Priority
?
1,030 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
0
Comment
Question by:pbissegger
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
Molnar István earned 1500 total points
ID: 38288000
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
 
LVL 12

Assisted Solution

by:Chris
Chris earned 500 total points
ID: 38288032
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
 
LVL 13

Assisted Solution

by:Molnar István
Molnar István earned 1500 total points
ID: 38288217
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
 

Author Comment

by:pbissegger
ID: 38291689
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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…
Suggested Courses

864 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