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
Post a Comment