google map distance finder

var map;

var directionsService = new google.maps.DirectionsService();

var directionsDisplay = new google.maps.DirectionsRenderer();

var map_center;

var map_zoom;

//initialize Google Map API onload

$(function(){ 

    initialize();  

});

//calls to make after finishing complete page load

$(document).ready(function(){

    

    //call on form submit

    $("#myForm").submit(function(){

        $("#loader").html('&nbsp;<span class="label label-info">Loading...</span>');

        calcRoute();

        return false;

    });

    

    // Hack for loading Map properly when opened from Modal box

    $('#mapModal').on('shown', function () {

        map_center = map.getCenter();

        google.maps.event.trigger(map, "resize");

        map.setCenter(map_center);

        map.setZoom(map_zoom);

    });

});

// Initialize google map object

function initialize() {

   var mapOptions = {

       center: new google.maps.LatLng(44.64886, -63.57532),

       zoom: 12,

       mapTypeId: google.maps.MapTypeId.ROADMAP

   };

   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   apply_autocomplete($("#fromAddress")[0]);

   apply_autocomplete($("#toAddress")[0]);

}

// Apply Autocomplete API

function apply_autocomplete(input){

var options = {

   types: ['geocode']

};

var autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.bindTo('bounds', map);

}

// Use this function to set Waypoint

function setDirections() 

{

//create waypoints array & fill it with all locations entered by user

var waypoints = new Array();

waypoints[0] = $("#fromAddress").val();

waypoints[1] = $("#toAddress").val();

var waypoints_counter=2;

  

$('input[name="toWaypoints[]"]').each(function()

{

waypoints[waypoints_counter]=$(this).val();

waypoints_counter++;

});

//this is the main google API function that generates the directions

gdir.loadFromWaypoints(waypoints);

}

// Calculate route and directions

function calcRoute() {

//create waypoints array & fill it with all locations entered by user

var waypts = new Array();

var start_address = $("#fromAddress").val();

var end_address = $("#toAddress").val();

  

$('input[name="toWaypoints[]"]').each(function()

{

waypts.push({

            location:$(this).val(),

            stopover:true

        });

});

    // Create a Request variable for Map

    var request = {

        origin: start_address,

        destination: end_address,

        waypoints: waypts,

        optimizeWaypoints: true,

        travelMode: google.maps.DirectionsTravelMode.DRIVING

    };

    // Execute the Route Method to generate Direction Route on Map

    directionsService.route(request, function(response, status) {

        var directionsDiv = document.getElementById('directions');

        if (status == google.maps.DirectionsStatus.OK) {

            directionsDiv.innerHTML = "";

            directionsDisplay.setMap(map);

            directionsDisplay.setDirections(response);

            directionsDisplay.setPanel(directionsDiv);

            $(directionsDiv).addClass('well');

            var route = response.routes[0];

            // calculate total distance and duration

            var distance = 0;

            var time = 0;

            for (var i=0; i<route.legs.length; i++) {

                var theLeg = route.legs[i];

                distance += theLeg.distance.value;

                time += theLeg.duration.value;

            }

            //display summary into summary block

            total_summary = '<div class="alert alert-info">';

            total_summary += '  <strong>Total Distance : </strong>' + showDistance(distance) + " ( about " + Math.round(time/60) + " minutes)" + '<br><br>';

            total_summary += '  <a id="show_map" href="#mapModal" role="button" data-toggle="modal" class="btn btn-info"><i class="icon-map-marker icon-white"></i> Show Map &amp; Directions</a>';

            total_summary += '</div>';

$("#summary").html(total_summary);

            map_zoom = map.getZoom();

            $("#loader").html('');

        }

        else {

            var statusText = getDirectionStatusText(status);

            directionsDiv.innerHTML = "An error occurred - " + statusText;

        }

    });

}

// Show distance in different measurements

function showDistance(distance) {

    return Math.round(distance/100) / 10 + " km (" + Math.round((distance*0.621371192)/100) / 10 + " miles)";

}

// Get the Map direction status message

function getDirectionStatusText(status){

    switch(status){

        case google.maps.DirectionsStatus.INVALID_REQUEST :

            return "Invalid request";

        case google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED :

            return "Maximum waypoints exceeded";

        case google.maps.DirectionsStatus.NOT_FOUND :

            return "Not found";

        case google.maps.DirectionsStatus.OVER_QUERY_LIMIT :

            return "Over query limit";

        case google.maps.DirectionsStatus.REQUEST_DENIED :

            return "Request denied";

        case google.maps.DirectionsStatus.UNKNOWN_ERROR :

            return "Unknown error";

        case google.maps.DirectionsStatus.ZERO_RESULTS :

            return "Zero results";

        default:

            return status;

    }

}

// Add More waypoints

function add_waypoint()

{

    waypoint_container = '<div class="control-group ">';

    waypoint_container+= '  <label class="control-label" for="inputEmail">Journey Start From :</label>';

    waypoint_container+= '  <div class="controls">';

    waypoint_container+= '      <input type="text" id="toWaypoints" name="toWaypoints[]" class="input-xlarge" value="">';

    waypoint_container+= '      &nbsp;<a href="#" onclick="return add_waypoint();">Add Waypoints</a>';

    waypoint_container+= '      &nbsp;<a href="#" onclick="return remove_waypoint(this);">Remove</a>';

    waypoint_container+= '  </div>';

    waypoint_container+= '</div>';

$('.destination-container').before(waypoint_container);

$('[name=toWaypoints\\[\\]]').each(function() {

    apply_autocomplete($(this)[0]);

});

return false;

}

// Remove waypoint

function remove_waypoint(obj)

{

$(obj).parent().parent().remove();

return false;

}