Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Geolocation driving route

    Hi.
    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 ?

    Thanks

    Natrox



    <!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/doc...ecifyingSensor
    -->
    <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("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>";
    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="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="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>
    </select>
    </div>
    <div id="map_canvas"></div>
    <div id="pos"></div>

    &nbsp;
    <div id="warnings_panel"></div>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 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:
    Code:
    var pos = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude);
    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.

  • Users who have thanked xelawho for this post:

    natrox (11-24-2011)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks!!!

    Thanks!!!
    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
    •