How to get a route that travels over water?

See more:

ASP.NET

jQuery

Google-Maps

Hi!

I have been given the task to upgrade googlemaps version 2 to version 3.

I have been reading up on googlemaps here: https://developers.google.com/maps/documentation/javascript/examples/[^]

And most of it is rather helpfull and contains most of the needed answers one needs to upgrade to version 3.

Sadly I have a problem which I have not been able to find a soloution to.

Issue:
I have a map that displays directions from a startpoint of the users chosing which goes through waypoints and finaly goes to the final destination, like this:

User types in city to travel from---------> goes through standard waypoint(mark B)---->goes to second waypont(mark c)----------> goes to final destination.

So whats the problem here?
well I want the user to recive directions that show him/her a route that uses a ferry between two countries BUT I get a route that does :

Startpoint---------->waypoint---->goes back to find a bridge and conntinnues to do so through the entire route(avoides water at all cost) and finaly it reaches the end destination.

Images:

Startpoint to first waypoint (Mark A----> Mark B)
http://imageshack.us/photo/my-images/24/number1b.png/[^]

As you can see it turns back from the waypoint and finds a bridge that goes between malmö and kopenhagen.

Mark B---->Mark C
http://imageshack.us/photo/my-images/21/number2l.png/[^]

As seen here it travels to the second waypoint and then turns to the final destnation.

The entire undesired route:
http://imageshack.us/photo/my-images/51/number3i.png/[^]

What I want:
http://img843.imageshack.us/img843/7837/wishy.png[^]

I want the route to give me directions from waypoint B to waypont C BUT I WANT IT TO TRAVEL VIA FERRY from trelleborg to rostock via ferry travel.

I tried setting the coordinates over the water and figured that googlemaps would automatically understand that it has to travel by ferry, this is how it was done in version 2(on the project im working on) but it did not. I have tried changing the travelmode but that did not work.

I have been reading up on this and looking for a answer but I have not found anything that can help me, either im missing something or i don't know what im doing wrong.

The code:

Document ready:

function initialize(){

          //Map on page

                  map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 10,
                  center: new google.maps.LatLng(<%=CenterCoords%>),
                  mapTypeId: google.maps.MapTypeId.TERRAIN
                });
                 map.setCenter(new google.maps.LatLng(<%=CenterCoords%>), <%=ZoomLevel %>); //

                 var marker;
                 marker = new google.maps.Marker({
                 position: new google.maps.LatLng(<%=CenterCoords%>),
                 map: map
                 });

                 mapdir = new google.maps.Map(document.getElementById('map_dir'), {
                  zoom: 10,
                  center: new google.maps.LatLng(<%=CenterCoords%>),
                  mapTypeId: google.maps.MapTypeId.TERRAIN
                });


                mapdir.setCenter(new google.maps.LatLng(<%=CenterCoords%>), <%=ZoomLevel %>); //

                var markerdir;
                markerdir = new google.maps.Marker({
                position: new google.maps.LatLng(<%=CenterCoords%>),
                map: mapdir
                   });

                gdir  = new google.maps.DirectionsService(mapdir, document.getElementById("directions"));

                google.maps.event.addDomListener(gdir, "error", handleErrors);


            $("#aspnetForm").submit(function() {
                overlayDirections();
                //new google.maps.DirectionsService();
                return false;
            });

            //Print a map using image from Google map
            $("#print-map").click( function() {
                $('.divMapToPrint').jqprint({ printContainer: false });
                return false;
            })

            //Print direction using Google maps
            $('#print-directions').click(function(){
                if (document.getElementById("fromAddress").value != '')
                    window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value + "&daddr=<%=GetToAddress() %>&hl=sv&geocode=AIzaSyDFPnl71Kf3R8ZJW3EEorajmOnf9y9LExw&mra=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");
                else
                    alert('<%=GetKey("HotelPrintNoFromAddress") %>');
                return false;
            });

        }

user interaction code:

function overlayDirections()
       {
           $("#directions").text('');
           fromAddress = document.getElementById("fromAddress").value;
           var language  = '<%=CurrentPage.LanguageBranch %>';

           <asp:PlaceHolder ID="Domestic" runat="server" visible="false">
               /*No ferry is needed*/
               var noOfPoints = 2;
               var waypoints = new Array(noOfPoints);
               waypoints[0] = fromAddress;
               waypoints[1] = '<%=GetToAddress() %>';
           </asp:PlaceHolder>

           <asp:PlaceHolder ID="International" runat="server" visible="false">
               /*Ferry is required*/
               viaAddress = document.getElementById('viaAddress').value;
               var noOfPoints = 4;
               var waypoints = new Array(noOfPoints);
               waypoints[0] = fromAddress;
               if (viaAddress == 'Rostock')
                   waypoints[<%=GetVia(1) %>] = '55.306898,13.131795'; //(Trelleborg - Rostock) 55.372387,13.149916
               else
                   waypoints[<%=GetVia(1) %>] = '55.309805,13.119736';
               waypoints[<%=GetVia(2) %>] = viaAddress;
               waypoints[3] = '<%=GetToAddress() %>';
           </asp:PlaceHolder>

           directionsDisplay = new google.maps.DirectionsRenderer();
           directionsDisplay.setMap(mapdir);

           gdir.route({
           origin: waypoints[0],
           destination: waypoints[3],
           waypoints: [{
           location: waypoints[1]

           },
           {
           location: waypoints[2]

           }],
           provideRouteAlternatives: true,
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         }, function(result, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(result);
           }
         });

       }

If anything is unclear just ask.
thankfull for answers!