View Full Version : Google maps API dropdownbox question

11-04-2012, 02:01 AM
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);
directionsService.route(travel, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {

// Check for geolocation support
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
// Success!
coords : true,
lat : position.coords.latitude,
lng : position.coords.longitude
function () {
// Gelocation fallback: Defaults to Stockholm, Sweden
coords : false,
address : "Den Haag, Nederland"
else {
// No geolocation fallback: Defaults to Lisbon, Portugal
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
11-04-2012, 05:49 AM
Ummm...and where, pray tell, is the HTML of the dropdown box? (I am assuming you mean a <select>?)

11-04-2012, 01:44 PM
Yes I mean a select.

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

Old Pedant
11-04-2012, 11:14 PM
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. ...