How to set waypoints in the googlemaps url

Question

I have a site that has a map. I have a textfield where i type in the city name that i want to travel from to a specific destination that is already set. to get to this destination I have hardcoded waypoints in my code.

All of this works great, i Now have a button that when clicked on gives me the directions (text format) and when i click on a another button i get a small map that shows me the start and end point. I want to add my waypoints to this map aswell.

I want it to look like this: http://img209.imageshack.us/img209/1121/whatiwant.png

But what i get is: http://img687.imageshack.us/img687/1554/whatigetm.png

Code for the second picture:

window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value + "&mrad="+waypoints +"&daddr=<%=GetToAddress() %>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");

how it originaly was before my changes:

 window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value +"&daddr=<%=GetToAddress() %>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXX=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");

original look: http://img441.imageshack.us/img441/56/originalhd.png

as you can see here i also lose the direction text when i add the "mrad" property.

Ive been reading up on these properties on the following links: http://www.seomoz.org/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters http://mashupguide.net/1.0/html/ch02s05.xhtml What parameters should I use in a Google Maps URL to go to a lat-lon?

But i cant find how to add my waypoints to the map.

I'm basicly looking for how to add my waypoints to the map and at the same time not lose my direction text that is shown in the last picture.

I used the mrdad property since it seemd the most logic choice since it says : "mrad: lets you specify an additional destination address."

Have i missunderstood something here? perhaps missing some properties?

Thankfull for answers! & if anything is unclear just ask!

//Ra3IDeN

EDIT:

The code that gives me the desired route(exxecutes when i click on the button "show route"):

 function overlayDirections()
        {
            // reset the map
            if(waypoints.length >0){
            request = {
                origin: null,
                destination: null,
                waypoints: [],
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                optimizeWaypoints:true,
                avoidHighways:true,
                avoidTolls: true
            };

            for (var i = 0; i < markers.length; i++) {
                  markers[i].setMap(null);
                }

              markers = [];
              origin = null;
              destination = null;
              waypoints = [];
              directionsDisplay.setMap(null);
              directionsDisplay = new google.maps.DirectionsRenderer();
              directionsDisplay.setMap(mapdir);
              }

            $("#directions").text('');
             //$("#map_dir").empty();
            viaAddress = document.getElementById('viaAddress').value;
            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*/
                var vpM = fromAddress;
                if (viaAddress == 'Rostock')
                var wp1 = new google.maps.LatLng(55.357953,13.14894);
                else
                var wp1 = new google.maps.LatLng(55.37417,13.14731);
                addMarker(wp1);
                waypoints.push({ location: wp1, stopover: true });
                if(viaAddress != 'Rostock')
                var wp2 = new google.maps.LatLng(53.93406,10.841789);
                else
                var wp2 = new google.maps.LatLng(54.152747,12.098023);
                addMarker(wp2);
                waypoints.push({ location: wp2, stopover: true });
                destination =new google.maps.LatLng(<%=GetToAddress() %>);
                addMarker(destination);

            // set properties to a object
            </asp:PlaceHolder>
                request = {
                origin: vpM,
                destination: destination,
                waypoints: waypoints,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                optimizeWaypoints:true,
                avoidHighways:false,
                avoidTolls: true
            };

            //displays the resutl
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(mapdir);
            directionsDisplay.setPanel(document.getElementById("directions"));

            // draws the route       
            gdir.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
            }
          });     
        }

using the via property did not give me any changes but perhaps i used it the wrong way?:

 $('#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=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow" + "&via="+ waypoints[1],waypoints[2]);
                else
                    alert('<%=GetKey("HotelPrintNoFromAddress") %>');
                return false;

            });

Answer 1

Ok finaly!

Add several addresses programatically into a google map

This was the basic soloution for this problem with some special tweaks that i will describe below. Dr.Molle to be fair i would never have solved this without your help, i will paste the code and if you wish copy the code and post it as a solution and i will accept it.

If you check the comments it will show that It took me some time to understad the solution above. What Dr.Molle did was that he set the final destination as waypoint 1!

so final destination i my case became waypoint 1, waypoint 1 became waypoint 2 and my final destination became waypoint 3.

Check picture for clarification: http://img6.imageshack.us/img6/8035/resulty.png

A---StartPoint

B--->(daddr) Waypoint 1

C-------> waypoint 2

D-------> Waypoint 3( the original final destination)

I also added the property "&dirflg=t" becaouse it avoids road tolls and gives me a route that travels via ferry.

the code :

 $('#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=" + request.waypoints[0].location.toUrlValue() + "+" + "to:" + request.waypoints[1].location.toUrlValue()+ "+" + "to:"+"<%=GetToAddress()%>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2" + "&dirflg=t","mywindow");
            }
        else
            alert('<%=GetKey("HotelPrintNoFromAddress") %>');
        return false;
    });

To see rest of the code, look at my question under EDIT.

thanks alot Dr.Molle and i hope that ive made this clear enough so others may benifit from it.