Hi. can you please advise me on how I can get my route from my location to a specific address via a dropdown list with several options. How can I replace the "start" with geolocation and still use the "end" dropdown list to find my routes. I find my position on the map automatically via geolocation, but can`t figure how i can get the "end" dropdownlist to work propperly.
Thanks Joakim <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Geolocation</ title> <meta name="viewport" content="initial-scale=1.0, user- scalable=no"> <meta charset="UTF-8"> <link href="http://code.google.com/apis/maps/documentation/javascript/ examples/default.css" rel="stylesheet" type="text/css" /> <!-- Include the maps javascript with sensor=true because this code is using a sensor (a GPS locator) to determine the user's location. See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=true&language=nb_NO"></script> <!--<script type="text/javascript" src="http://maps.googleapis.com/ maps/api/js?sensor=true&language=nb_NO"> --> <script type="text/javascript"> var map; var directionDisplay; var directionsService; var stepDisplay; var markerArray = []; var initialLocation; //var oslo = new google.maps.LatLng(59.947639, 10.884469); var browserSupportFlag = new Boolean(); function initialize() { directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan. var oslo = new google.maps.LatLng(59.947639, 10.884469); var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, center: oslo } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow(); } function calcRoute() { // First, remove any existing markers from the map. for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); } // Now, clear the array itself. markerArray = []; // Retrieve the start and end locations and create // a DirectionsRequest using DRIVING directions. var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; // Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { var warnings = document.getElementById("warnings_panel"); warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>"; directionsDisplay.setDirections(response); showSteps(response); } }); } function showSteps(directionResult) { // For each step, place a marker, and add the text to the marker's // info window. Also attach the marker to an array so we // can keep track of it and remove it when calculating new // routes. var myRoute = directionResult.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { var marker = new google.maps.Marker({ position: myRoute.steps[i].start_point, map: map }); attachInstructionText(marker, myRoute.steps[i].instructions); markerArray[i] = marker; } } function attachInstructionText(marker, text) { google.maps.event.addListener(marker, 'click', function() { // Open an info window when the marker is clicked on, // containing the text of the step. stepDisplay.setContent(text); stepDisplay.open(map, marker); }); } // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: 'Du er her.' }); map.setCenter(pos); }, function() { handleNoGeolocation(true); }); } else { // Browser doesn't support Geolocation handleNoGeolocation(false); } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body onload="initialize()"> <div style="text-align:center"> <select id="start"> <option value="Nedre Storgate 16, 3015 Drammen">Netteam</option> <option value="grand central station, new york, ny">Grand Central Station</option> <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option> <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option> <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> </select> <select id="end" onchange="calcRoute();"> <option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</ option> <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option> <option value="moma, New York, NY">MOMA</option> <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option> <option value="253 West 125th Street, New York, NY">Apollo Theater</ option> <option value="1 Wall St, New York, NY">Wall St</option> </select> </div> <div id="map_canvas"></div> <div id="warnings_panel"></div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.