Friday, 5 September 2014

Show Multiple Routes in Google Map API

Add required JS: 
  
    <script src="script/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <script type="text/javascript">
        var map;
        var RouteCoordinates = [];
        var Routes = [];
        var RouteColor = ["#0094ff", "#479f67", "#3c9a94", "#a17b4b",
                                  "#4ad98a", "#50cfe1", "#8ad3a4", "#40cbf1",
                                  "#5ecf98", "#17c31f"];
        var DrivePath, ResLocInterval;
        var directionsService = new google.maps.DirectionsService();

        $(document).ready(function () {
            var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(40.748492, -73.985496),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            $("#btnGetDirections").click(function () {
                calcRoute($("#txtAddress1").val(), $("#txtAddress2").val(), 'Root1');
            });

            $("#btnGetDirections1").click(function () {
                calcRoute($("#txtAddress11").val(), $("#txtAddress22").val(), 'Root2');
            });
        });

        function calcRoute(start, end, FromRes) {

            for (var i = 0; i < Routes.length; i++) {
                if (Routes[i].Title == FromRes) {
                    if (Routes[i].PolyLine != null || Routes[i].PolyLine != undefined) {
                        Routes[i].PolyLine.setMap(null);
                        Routes[i].PolyLine = null;
                        clearInterval(Routes[i].Interval);
                        Routes[i].Direction.setMap(null);
                    }
                    Routes.splice(i, 1);
                    break;
                }
            }

            var directionsDisplay = new google.maps.DirectionsRenderer({
                draggable: true,
                map: map,
                polylineOptions: { strokeColor: "#6666FF", strokeOpacity: 0.4, strokeWeight: 5 },
                markerOptions: { title: FromRes }
               
            });

            var objRoute = new Object();
            objRoute.Title = FromRes;
            objRoute.PolyLine = null;
            objRoute.Interval = null;
            objRoute.OffSetCnt = 0;
            objRoute.Direction = directionsDisplay;
            Routes.push(objRoute);

            google.maps.event.addListener(directionsDisplay, 'directions_changed', function (e) {
                ShowPolyLine(directionsDisplay.getDirections(), directionsDisplay.markerOptions.title);
            });

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING,
                provideRouteAlternatives: true
            };

            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }
            });
        }


        function ShowPolyLine(result, Title) {
            RouteCoordinates = [];
            for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                RouteCoordinates.push(new google.maps.LatLng(result.routes[0].overview_path[i].lat(), result.routes[0].overview_path[i].lng()))
            }

            var Filter = $(Routes).filter(function () {
                return this.Title == Title;
            });

            if (Filter.length > 0) {

                var lineSymbol = {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    scale: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.7,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.7,
                    strokeWeight: 4
                };

                if (Filter[0].PolyLine != null || Filter[0].PolyLine != undefined) {
                    Filter[0].PolyLine.setPath(RouteCoordinates);
                    clearInterval(Filter[0].Interval);
                }
                else {
                    Filter[0].PolyLine = new google.maps.Polyline({
                        map: map,
                        path: RouteCoordinates,
                        icons: [{
                            icon: lineSymbol,
                            offset: '100%'
                        }],
                        geodesic: true,
                        strokeColor: RouteColor[Math.random().toString().substr(5, 1)],
                        strokeOpacity: 1.0,
                        strokeWeight: 5
                    });
                }

                Filter[0].Interval = window.setInterval(function () {
                    Filter[0].OffSetCnt = (Filter[0].OffSetCnt + 1) % 4000;
                    var icons = Filter[0].PolyLine.get('icons');
                    icons[0].offset = (Filter[0].OffSetCnt / 40) + '%';
                    Filter[0].PolyLine.set('icons', icons);
                }, 100);
            }
        }

    </script>
    <style>
        html, body, form {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        #map_canvas {
            width: 80%;
            height: 100%;
            float: left;
        }
    </style>

HTML

<div id="map_canvas"></div>
        <div style="width: 20%; float: right;">
            <input type="text" placeholder="From" id="txtAddress1" value="23.026126, 72.547248" /><br />
            <input type="text" placeholder="To" id="txtAddress2" value="23.039496, 72.554963" /><br />
            <input type="button" value="Get" id="btnGetDirections" /><br />

            <input type="text" placeholder="From" id="txtAddress11" value="23.027054, 72.544780" /><br />
            <input type="text" placeholder="To" id="txtAddress22" value="23.029088, 72.551282" /><br />
            <input type="button" value="Get" id="btnGetDirections1" />

        </div>

Check Result

No comments:

Post a comment