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: .png
But what i get is: .png
Code for the second picture:
window.open(";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(";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: .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: .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(";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;
});
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./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./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/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters http://mashupguide/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./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;
});
-
Cool, but please show your code - or even better, provide a working example in a JSFiddle. Also, it looks like you're better of using
viarather thanmrad– ahren Commented Apr 18, 2013 at 12:15 - 1 possible duplicate of Add several addresses programatically into a google map – Dr.Molle Commented Apr 18, 2013 at 12:30
- @Dr.Mobile that is the result that I am after but for some reason i can not get it to work. My code: window.open("maps.google./maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value + "&daddr=<%=GetToAddress()%>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXXXXXX=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2" + "to:" + waypoints[1] + "to:"+ waypoints[2] ,"mywindow"); something wrong here? – ThunD3eR Commented Apr 18, 2013 at 12:46
- My waypoints are coordinates and not city names(strings) might that be the reason that i can not make this work? btw sorry for the missspelling of the name " Dr.Molle" – ThunD3eR Commented Apr 18, 2013 at 13:20
- my intention is not to spam but i noticed something that might be the problem here but i don't know how to convert it into a correct format? my url showed : to:[object Object]+to:[object Object] Instead of the coordinates that my waypoint have. Which format does this need to be in? and how do i convert it? – ThunD3eR Commented Apr 18, 2013 at 13:36
1 Answer
Reset to default 4Ok 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 ments 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./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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744313997a4568089.html
评论列表（0条）