Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Thanked 0 Times in 0 Posts

    Geolocation driving route

    i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?



    <!DOCTYPE html>
    <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/doc...ecifyingSensor
    <script type="text/javascript"
    <!--<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++) {
    // Now, clear the array itself.
    markerArray = [];

    // Retrieve the start and end locations and create
    // a DirectionsRequest using DRIVING directions.
    var start = document.getElementById("sart").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>";

    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.open(map, marker);

    // Try HTML5 geolocation
    if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng(position.coords.latitude,

    var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: 'Du er her.'

    }, function() {
    } else {
    // Browser doesn't support Geolocation

    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);
    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);
    <body onload="initialize()">
    <div style="text-align:center">
    <select id="start">
    <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 id="end" onchange="calcRoute();">
    <option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</option>
    <option value="Sonja Henies plass 3, 0185 Oslo">Oslo plaza</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>
    <div id="map_canvas"></div>
    <div id="pos"></div>

    <div id="warnings_panel"></div>

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 591 Times in 587 Posts
    ... so you take the user's position (pos in your code) and give it to the directions service instead of the "start" variable supplied by the drop down menu. you will want to make pos into a global variable accesible to the directions service by adding this at the start:

    var pos

    and removing the "var" from this:
    var pos = new google.maps.LatLng(position.coords.latitude,
    you might also like to add some error handling in case the directions service fails to find the route, etc, but that's up to you.

  3. Users who have thanked xelawho for this post:

    natrox (11-24-2011)

  4. #3
    New Coder
    Join Date
    Nov 2011
    Thanked 0 Times in 0 Posts


    That worked perfect


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts