Google maps API dropdownbox question

[Snoowpy]

Hey, a codingnoob here.

I have to make an app for a schoolproject and I'm a total javascript beginner.
I have been messing around with a sample code, but I need to add a dropdownbox to the code.

Point A has to be a Geolocation and Point B has to be the location of the dropdown box. Now I've looked at sample codes and have a general idea but I can not for the life of me get it to work correctly, I'm hoping one of you fine gentleman can help me out... it should be simple but I cant get it to work.

(function () {
						var directionsService = new google.maps.DirectionsService(),
							directionsDisplay = new google.maps.DirectionsRenderer(),
							createMap = function (start) {
								var travel = {
										origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
										destination : "Fahrenheitstraat, The Netherlands",
										travelMode : google.maps.DirectionsTravelMode.DRIVING
										// Exchanging DRIVING to WALKING above can prove quite amusing :-)
									},
									mapOptions = {
										zoom: 10,
										// Default view: downtown Stockholm
										center : new google.maps.LatLng(52.0758733, 4.2721553),
										mapTypeId: google.maps.MapTypeId.ROADMAP
									};

								map = new google.maps.Map(document.getElementById("map"), mapOptions);
								directionsDisplay.setMap(map);
								directionsDisplay.setPanel(document.getElementById("map-directions"));
								directionsService.route(travel, function(result, status) {
									if (status === google.maps.DirectionsStatus.OK) {
										directionsDisplay.setDirections(result);
									}
								});
							};

							// Check for geolocation support	
							if (navigator.geolocation) {
								navigator.geolocation.getCurrentPosition(function (position) {
										// Success!
										createMap({
											coords : true,
											lat : position.coords.latitude,
											lng : position.coords.longitude
										});
									}, 
									function () {
										// Gelocation fallback: Defaults to Stockholm, Sweden
										createMap({
											coords : false,
											address : "Den Haag, Nederland"
										});
									}
								);
							}
							else {
								// No geolocation fallback: Defaults to Lisbon, Portugal
								createMap({
									coords : false,
									address : "Lisbon, Portugal"
								});
							}
					})();

Normally I like to figure out things myself but the deadline is coming up and I'm tired and having problems at home so I'm not sure how much time i've got left.

I tried doing something like this:

function calcRoute() {
    var start = (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,;
    var end = document.getElementById("end").value;
    var distanceInput = document.getElementById("distance");

but to no avail

[Old Pedant]

Ummm...and where, pray tell, is the HTML of the dropdown box? (I am assuming you mean a <select>?)

[Snoowpy]

Yes I mean a select.

<select id="end" onchange="calcRoute()">
        <option value="Amsterdam, Netherlands">Kneets Gym</option>

[Old Pedant]

Ummm...as your code is written in the first post, you can *NOT* use onchange in the <select..

Your code in the first post is, actually, very well done. It's "unobtrusive javascript", meaning that no code outside of that first ( and the matching ) will ever be seen by other scripts.

But "other scripts" *ALSO* includes stuff like <select ... onchange="calcRoute()>

What you need to do is omit the onchange from the <select> and add it in via JS code inside your "unobtrusive javasccript".

That is, something like:

(
  function( )
 {
      ... any code ...

      document.getElementById("end").onchange = calcRoute;

      function calcRoute( ) 
     {
         var start = (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,; 
         var end = this.value; // this *will* refer to the <select>!
         var distanceInput = document.getElementById("distance");
         ... etc. ...

     }
     ...

)();