Google – Get Direction

This example gives you a direction from origin to destination. First adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. Then sending the search values to google “directionsService” you can get the direction. Then send the api response to “directionsDisplay” to draw the route. DEMO

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.8688,
            lng: 151.2195
        },
        zoom: 13,
        mapTypeId: 'roadmap'
    });
    directionsDisplay.setMap(map);

    // Create the search box and link it to the UI element.
    var inputO = document.getElementById('pac-input-origin');
    var inputD = document.getElementById('pac-input-dest');
    searchBoxO = new google.maps.places.SearchBox(inputO);
    searchBoxD = new google.maps.places.SearchBox(inputD);

    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBoxO.addListener('places_changed', function() {
        onChangeHandler();
    });
    searchBoxD.addListener('places_changed', function() {
        onChangeHandler();
    });

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var placesO = searchBoxO.getPlaces();
    var placesD = searchBoxD.getPlaces();
    if (!placesO || !placesD || placesO.length == 0 || placesD.length == 0) {
        return;
    }
    directionsService.route({
        origin: {
            lat: placesO[0].geometry.location.lat(),
            lng: placesO[0].geometry.location.lng()
        },
        destination: {
            lat: placesD[0].geometry.location.lat(),
            lng: placesD[0].geometry.location.lng()
        },
        travelMode: 'DRIVING'
    }, function(response, status) {
        console.log(response);
        document.getElementById("distLen").value = response.routes[0].legs[0].distance.text;
        document.getElementById("timeLen").value = response.routes[0].legs[0].duration.text;
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}
Advertisements

Published by

shiyam

My passion became my profession , I'm a driven, energetic and proactive tech professionally. I consider myself an engagement professional, as I don't simply provide solutions, I create them. I am a continuous learner – always looking for new technologies, in my spare time I search Google for the latest trends . I like to think of myself as a futurist and I'm a Full Stack JavaScript Developer. >> Skills << ✔ Web App Development ✔ Strong Javascript ✔ Backbone.js, Angular.js, Dojo.js ✔ jQuery.js ✔ Node.js ✔ MongoDb , MySql ✔ Socket.io / Web Sockets (Native) ✔ PHP ✔ Ruby (Watir - Automation) ✔ Grunt ✔ Github , Bitbucket , SVN ✔ Agile Process ✔ Scrum ✔ Ability to research and adapt new techs ✔ Fast Learner ✔ Always Punctual ✔ Critical Thinker ✔ Friendly Personality

2 thoughts on “Google – Get Direction”

  1. Nice Article thanks,
    and need small clarification how to get lat and lang individually for both source and destination can you please help me in this

    Liked by 1 person

    1. Once u enter source and destination in textboxes values will be stored in variable “placeO” and “placeD”, you can access from them, code below,

      originLat = placesO[0].geometry.location.lat();

      originLong = placesO[0].geometry.location.lng();

      destLat = placesD[0].geometry.location.lat();

      destLong = placesD[0].geometry.location.lng();

      these “placeO” and “placeD” contains many info about the place. Console it, you will get it all. Thanks for the comment 🙂

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s