javascript - How to set waypoints in the googlemaps url -


i have site has map. have textfield type in city name want travel specific destination set. destination have hardcoded waypoints in code.

all of works great, have button when clicked on gives me directions (text format) , when click on button small map shows me start , end point. want add waypoints map aswell.

i want this: http://img209.imageshack.us/img209/1121/whatiwant.png

but is: http://img687.imageshack.us/img687/1554/whatigetm.png

code 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 originaly before 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 can see here lose direction text when add "mrad" property.

ive been reading on these properties on 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 use in google maps url go lat-lon?

but cant find how add waypoints map.

i'm basicly looking how add waypoints map , @ same time not lose direction text shown in last picture.

i used mrdad property since seemd logic choice since says : "mrad: lets specify additional destination address."

have missunderstood here? perhaps missing properties?

thankfull answers! & if unclear ask!

//ra3iden

edit:

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

 function overlaydirections()         {             // reset map             if(waypoints.length >0){             request = {                 origin: null,                 destination: null,                 waypoints: [],                 travelmode: google.maps.directionstravelmode.driving,                 optimizewaypoints:true,                 avoidhighways:true,                 avoidtolls: true             };              (var = 0; < 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 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 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 object             </asp:placeholder>                 request = {                 origin: vpm,                 destination: destination,                 waypoints: waypoints,                 travelmode: google.maps.directionstravelmode.driving,                 optimizewaypoints:true,                 avoidhighways:false,                 avoidtolls: true             };              //displays resutl             directionsdisplay = new google.maps.directionsrenderer();             directionsdisplay.setmap(mapdir);             directionsdisplay.setpanel(document.getelementbyid("directions"));              // draws route                    gdir.route(request, function(result, status) {             if (status == google.maps.directionsstatus.ok) {               directionsdisplay.setdirections(result);             }           });              } 

using via property did not give me changes perhaps used 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;              }); 

ok finaly!

add several addresses programatically google map

this basic soloution problem special tweaks describe below. dr.molle fair never have solved without help, paste code , if wish copy code , post solution , accept it.

if check comments show took me time understad solution above. dr.molle did set final destination waypoint 1!

so final destination case became waypoint 1, waypoint 1 became waypoint 2 , final destination became waypoint 3.

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

a---startpoint

b--->(daddr) waypoint 1

c-------> waypoint 2

d-------> waypoint 3( original final destination)

i added property "&dirflg=t" becaouse avoids road tolls , gives me route 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 code, @ question under edit.

thanks alot dr.molle , hope ive made clear enough others may benifit it.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -