Google Map Draw route between two cities

var markers = [];
var map = '';
function ShowTrack(address) {
    markers = [];
    debugger;
    var lst = address.split('~');
    GetMarkers(address);
    {
        if (lst.length > 1) {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);


            var lat_lng = new Array();
            var latlng = [];
            var myLatlng = [];
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                //latlng.push(data.lat + "~" + data.lng);
                latlng.push({ "lat": data.lat, "lng": data.lng });

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);

            }
            google.maps.event.addListenerOnce(map, 'idle', function () {

                google.maps.event.trigger(map, 'resize');
                // map.setCenter(latlngbounds.getCenter());
                var center = new google.maps.LatLng(50, 3, 10.9);
                map.setCenter(center);
                map.fitBounds(latlngbounds);
            });
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

            //***********ROUTING****************//
            //Initialize the Path Array
            var path = new google.maps.MVCArray();
            //Initialize the Direction Service
            var service = new google.maps.DirectionsService();
            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

            //Loop and Draw Path Route between the Points on MAP      
            for (var i = 0; i < lat_lng.length; i++) {
                if ((i + 1) < lat_lng.length) {
                    var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                        else {
                            initMap(latlng);
                        }
                    });
                }
            }


        }
    }
}
function initMap(latlng) {
    debugger;
    var flightPath = new google.maps.Polyline({
        path: latlng,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}
function GetMarkers(address) {
    var list = [];
    list = address.split('~');
    debugger;


    for (var index = 0; index < list.length; index++) {

        var desc = list[index];
        if (desc != "") {
            if (index == 0) {
                desc = "Pickup Location
" + " " + desc;
            }
            var Address = getLatLon(list[index]);
            markers.push({
                "title": list[index],
                "lat": Address.location.lat,
                "lng": Address.location.lng,
                "description": desc
            })
        } //Check if Location text is not empty

    }
}


function getLatLon(addr) {

    if (addr != "") {
        addr = addr.replace(new RegExp(" ", 'g'), "+");
        ajax_url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + addr + "&sensor=false";
        var result = {};

        $.ajax({
            url: ajax_url,
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                result = {
                    "location": {
                        "lat": data.results[0].geometry.location.lat,
                        "lng": data.results[0].geometry.location.lng
                    }
                };
            },
            error: function (xhr, status, error) {
                if (xhr.status == 200) {
                    isSessionExpiresErrorMessage(xhr);
                }
                else {
                    $('.loader').hide();
                    alert(status);
                    alert(error);
                }
            }
        });

    }
    return result;
}

Comments

Popular posts from this blog

Querying a Data Table Using Select Method and Lambda Expressions in Dot Net

StringToTable

GetPhoneSSNFormat