Menu
Close

Direction With Custom Icon

Sample Implementation

 

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

        <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,direction_option;
        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',
                    isDraggable:false,
                    end: {label: 'India Gate', geoposition: "28.612964,77.229463" },
                    Profile:['driving','biking','trucking','walking'],
                    start_icon: {
                        url: 'https://apis.mappls.com/map_v3/1.png',
                        width: 30, //optional
                        height: 40 //optional
                    },
                    end_icon: {
                        url: 'https://apis.mappls.com/map_v3/2.png',
                        width: 30, //optional
                        height: 40 //optional
                    },
                }
                mappls.direction(direction_option,function(data) {
                    direction_plugin=data;
                    console.log(direction_plugin);
                });
            });
        }
    </script>
        </body>
  </html>

Call at Mappls
Product release

Personalisation SDK, by Mappls, is India's first O2O engagement tool that can 3X your customer engagement, retention and conversion.

Boost your businesses with Mappls’ industry-leading optimisation APIs and SDKs to bring the best and most efficient ways to deliver goods, save time and increase profits.

or