Direction With Tracking

Sample Implementation

 

  <html>
  <head>
    <title>Direction With Tracking</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Direction With Tracking">

        <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1"></script>
        <script src="https://apis.mappls.com/advancedmaps/api/<token>/map_sdk_plugins?v=3.0"></script>
        <style>
        body { margin: 0 ; }
        #map {width: 100%;height: 100vh; margin: 0; padding: 0; }
    </style>
    </head>
    <body>
        <div id="map"></div>
            <script>
        /*Map Initialization*/

        var map,add,direction_plugin, c = 0, ll = [
            { lat: 28.63124010064198, lng: 77.46734619140625 },
            { lat: 28.63395214251842, lng: 77.4635696411133 },
            { lat: 28.634253476178397, lng: 77.45704650878908 },
            { lat: 28.634856140902432, lng: 77.44880676269533 },
            { lat: 28.635760131498788, lng: 77.44228363037111 },
            { lat: 28.637266765186347, lng: 77.43679046630861 },
            { lat: 28.637869412604015, lng: 77.43232727050783 },
            { lat: 28.639677334088308, lng: 77.42855072021486 },
            { lat: 28.640279967660007, lng: 77.42305755615236 },
            { lat: 28.640882597770116, lng: 77.41928100585939 },
            { lat: 28.640882597770116, lng: 77.41516113281251 },
            { lat: 28.640581283147768, lng: 77.40932464599611 },
            { lat: 28.63756808932784, lng: 77.40108489990236 },
            { lat: 28.635760131498788, lng: 77.39421844482423 },
            { lat: 28.634253476178397, lng: 77.38735198974611 },
            { lat: 28.631541442089226, lng: 77.37808227539064 },
        ];
        function initMap1(){
            map = new mappls.Map('map', {
                center: [28.09, 78.3],
                zoom: 5
            });
            map.addListener('load',function(){ 
                /*direction plugin initialization*/
                var direction_option = {
                    map: map,
                    divWidth:'350px',
                    start: { label: 'start', geoposition: "28.63124010064198,77.46734619140625" },
                    end: { label: 'end', geoposition: "28.631541442089226,77.37808227539064" },
                    steps: false,
                    search: true,
                    isDraggable: false,
                    alternatives: false,
                    callback: function(data) {}
                }
                direction_plugin = mappls.direction(direction_option);
                add = setInterval(() => {
                    c++;
                    if (ll[c]) {
                        direction_plugin.tracking({
                            location: ll[c],
                            label:'current location',
                            icon:"../img/mkr_start.png",
                            heading: false,
                            reRoute: true, 
                            fitBounds:false,
                            animationSpeed:5,
                            delay:2000
                        });
                        if(ll[c].lat === 28.631541442089226){
                            clearInterval(add); 
                            setTimeout(() => {alert("reached.");}, 500);
                        }
                    }
                }, 2000);
            });
        }
    </script>
        </body>
  </html>
Request Call Back
There's so much that Mappls MapmyIndia can do for your enterprise or individual requirements. Explore our website to learn more or request a callback/email if you'd like us to connect with you.
For Solutions : +91-7829 774 111
For Gadgets : +91-9999 333 223