Marker Follows Path

    
      <span class="pln">
      </span><span class="tag">&lt;html&gt;</span><span class="pln">
        </span><span class="tag">&lt;head&gt;</span><span class="pln">
          </span><span class="tag">&lt;title&gt;</span><span class="pln">Marker Follows Path</span><span class="tag">&lt;/title&gt;</span><span class="pln">
          </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"initial-scale=1.0"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;style&gt;</span><span class="pln">
          html</span><span class="pun">,</span><span class="pln">
          body</span><span class="pun">,</span><span class="pln">
          </span><span class="com">#map {</span><span class="pln">
            margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
            padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
            width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
            height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
          </span><span class="pun">}</span><span class="pln">
                          
          </span><span class="tag">&lt;/style&gt;</span><span class="pln">
             &lt;script src="https://apis.mappls.com/advancedmaps/api/</span><span class="tag">&lt;Token&gt;</span><span class="pun">/</span><span class="pln">map_sdk</span><span class="pun">?</span><span class="pln">layer</span><span class="pun">=</span><span class="pln">vector</span><span class="pun">&amp;</span><span class="pln">v</span><span class="pun">=</span><span class="lit">3.0</span><span class="pun">&amp;</span><span class="pln">callback</span><span class="pun">=</span><span class="pln">initMap1</span><span class="str">" defer async&gt;</span><span class="tag">&lt;/script&gt;</span><span class="pln">
            </span><span class="tag">&lt;/head&gt;</span><span class="pln">
        </span><span class="tag">&lt;body&gt;</span><span class="pln">
                    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
                        </span><span class="tag">&lt;script&gt;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> marker</span><span class="pun">,</span><span class="pln"> map</span><span class="pun">,</span><span class="pln"> polyline</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln"> lat</span><span class="pun">:</span><span class="pln"> </span><span class="lit">28.55186943239279</span><span class="pun">,</span><span class="pln"> lng</span><span class="pun">:</span><span class="pln"> </span><span class="lit">77.26765259393522</span><span class="pln"> </span><span class="pun">}];</span><span class="pln">

        </span><span class="kwd">function</span><span class="pln"> initMap1</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            map </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Map</span><span class="pun">(</span><span class="str">"map"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                center</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">28.553033295685296</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26818903573576</span><span class="pun">],</span><span class="pln">
                zoom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16</span><span class="pun">,</span><span class="pln">
                zoomControl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
                clickableIcons</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
                disableDoubleClickZoom</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
            map</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                marker </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">({</span><span class="pln">
                    map</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">,</span><span class="pln">
                    width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
                    height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
                    html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;img id="m1" src="https://www.mapmyindia.com/api/advanced-maps/doc/sample/map_sdk/car.png" style="width:20px; margin-left:0px;" /&gt;'</span><span class="pun">,</span><span class="pln">
                    offset</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">],</span><span class="pln">
                    position</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        lat</span><span class="pun">:</span><span class="pln"> </span><span class="lit">28.55186943239279</span><span class="pun">,</span><span class="pln">
                        lng</span><span class="pun">:</span><span class="pln"> </span><span class="lit">77.26765259393522</span><span class="pun">,</span><span class="pln">
                    </span><span class="pun">},</span><span class="pln">
                    fitbounds</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
                marker</span><span class="pun">[</span><span class="str">"id"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">"m1"</span><span class="pun">;</span><span class="pln"> </span><span class="com">//icon id store in marker object (Important)</span><span class="pln">


                map</span><span class="pun">.</span><span class="pln">addListener</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    path</span><span class="pun">.</span><span class="pln">push</span><span class="pun">({</span><span class="pln">
                        lat</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln">
                        lng</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln">
                    </span><span class="pun">});</span><span class="pln">

                    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">length </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">3</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        polyline </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Polyline</span><span class="pun">({</span><span class="pln">
                            map</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">,</span><span class="pln">
                            paths</span><span class="pun">:</span><span class="pln"> path</span><span class="pun">,</span><span class="pln">
                            strokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#333'</span><span class="pun">,</span><span class="pln">
                            strokeOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.0</span><span class="pun">,</span><span class="pln">
                            strokeWeight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln">
                            fitbounds</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
                        </span><span class="pun">});</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        polyline</span><span class="pun">.</span><span class="pln">extend</span><span class="pun">({</span><span class="pln"> lat</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> lng</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lng </span><span class="pun">});</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">


                    smoothNavigate</span><span class="pun">(</span><span class="pln">
                        marker</span><span class="pun">,</span><span class="pln">
                        </span><span class="pun">{</span><span class="pln">
                            lat</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln">
                            lng</span><span class="pun">:</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">lngLat</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln">
                        </span><span class="pun">},</span><span class="pln">
                        </span><span class="lit">5</span><span class="pln">
                    </span><span class="pun">);</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        </span><span class="com">// Set position Smoothly</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> smoothNavigate</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">,</span><span class="pln"> setPos</span><span class="pun">,</span><span class="pln"> no</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">no </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> no</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> coordinates </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> prv </span><span class="pun">=</span><span class="pln"> obj</span><span class="pun">.</span><span class="pln">getPosition</span><span class="pun">();</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> next </span><span class="pun">=</span><span class="pln"> setPos</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> dis </span><span class="pun">=</span><span class="pln"> getDistanceFromLatLonInKm</span><span class="pun">(</span><span class="pln">
                    prv</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln">
                    prv</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln">
                    next</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln">
                    next</span><span class="pun">.</span><span class="pln">lng
                </span><span class="pun">);</span><span class="pln"> </span><span class="com">// find distancr</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> hed </span><span class="pun">=</span><span class="pln"> angleFromCoordinate</span><span class="pun">(</span><span class="pln">prv</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> prv</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln"> next</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> next</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">);</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> n </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">round</span><span class="pun">(</span><span class="pln">dis</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> no</span><span class="pun">;</span><span class="pln"> </span><span class="com">// the number of coordinates you want</span><span class="pln">
                </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> n </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">--)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    coordinates</span><span class="pun">.</span><span class="pln">push</span><span class="pun">({</span><span class="pln">
                        lat</span><span class="pun">:</span><span class="pln"> </span><span class="pun">(</span><span class="pln">prv</span><span class="pun">.</span><span class="pln">lat </span><span class="pun">*</span><span class="pln"> i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n </span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="pln">next</span><span class="pun">.</span><span class="pln">lat </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln">n </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">))</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n</span><span class="pun">,</span><span class="pln">
                        lng</span><span class="pun">:</span><span class="pln"> </span><span class="pun">(</span><span class="pln">prv</span><span class="pun">.</span><span class="pln">lng </span><span class="pun">*</span><span class="pln"> i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n </span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="pln">next</span><span class="pun">.</span><span class="pln">lng </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln">n </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">))</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n</span><span class="pun">,</span><span class="pln">
                    </span><span class="pun">});</span><span class="pln">
                    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">ceil</span><span class="pun">(</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        coordinates</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">next</span><span class="pun">);</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
                setTimeout</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&lt;</span><span class="pln"> coordinates</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="kwd">function</span><span class="pln"> invoke</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            setTimeout</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                obj</span><span class="pun">.</span><span class="pln">setPosition</span><span class="pun">(</span><span class="pln">coordinates</span><span class="pun">[</span><span class="pln">x</span><span class="pun">]);</span><span class="pln">
                                document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">.</span><span class="pln">id</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">transform </span><span class="pun">=</span><span class="pln">
                                    </span><span class="str">"rotate("</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> hed </span><span class="pun">+</span><span class="pln"> </span><span class="str">"deg)"</span><span class="pun">;</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln"> </span><span class="lit">10</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> x </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                        invoke</span><span class="pun">(</span><span class="pln">i</span><span class="pun">);</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                </span><span class="pun">},</span><span class="pln"> </span><span class="lit">100</span><span class="pun">);</span><span class="pln">
            </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                obj</span><span class="pun">.</span><span class="pln">setPosition</span><span class="pun">(</span><span class="pln">setPos</span><span class="pun">);</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        </span><span class="com">// Find Heading of map using Two latlng</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> angleFromCoordinate</span><span class="pun">(</span><span class="pln">lat1</span><span class="pun">,</span><span class="pln"> lon1</span><span class="pun">,</span><span class="pln"> lat2</span><span class="pun">,</span><span class="pln"> lon2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> p1 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                x</span><span class="pun">:</span><span class="pln"> lat1</span><span class="pun">,</span><span class="pln">
                y</span><span class="pun">:</span><span class="pln"> lon1</span><span class="pun">,</span><span class="pln">
            </span><span class="pun">};</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> p2 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                x</span><span class="pun">:</span><span class="pln"> lat2</span><span class="pun">,</span><span class="pln">
                y</span><span class="pun">:</span><span class="pln"> lon2</span><span class="pun">,</span><span class="pln">
            </span><span class="pun">};</span><span class="pln">
            </span><span class="com">// angle in radians</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> angleRadians </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln">p2</span><span class="pun">.</span><span class="pln">y </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span><span class="pln"> p2</span><span class="pun">.</span><span class="pln">x </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">x</span><span class="pun">);</span><span class="pln">
            </span><span class="com">// angle in degrees</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> angleDeg </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln">p2</span><span class="pun">.</span><span class="pln">y </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span><span class="pln"> p2</span><span class="pun">.</span><span class="pln">x </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">x</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">180</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> angleDeg</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        </span><span class="com">// calculate Distance between 2 point</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> getDistanceFromLatLonInKm</span><span class="pun">(</span><span class="pln">lat1</span><span class="pun">,</span><span class="pln"> lon1</span><span class="pun">,</span><span class="pln"> lat2</span><span class="pun">,</span><span class="pln"> lon2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> R </span><span class="pun">=</span><span class="pln"> </span><span class="lit">6371</span><span class="pun">;</span><span class="pln"> </span><span class="com">// Radius of the earth in km</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> dLat </span><span class="pun">=</span><span class="pln"> deg2rad</span><span class="pun">(</span><span class="pln">lat2 </span><span class="pun">-</span><span class="pln"> lat1</span><span class="pun">);</span><span class="pln"> </span><span class="com">// deg2rad below</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> dLon </span><span class="pun">=</span><span class="pln"> deg2rad</span><span class="pun">(</span><span class="pln">lon2 </span><span class="pun">-</span><span class="pln"> lon1</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> a </span><span class="pun">=</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln">dLat </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln">dLat </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln">deg2rad</span><span class="pun">(</span><span class="pln">lat1</span><span class="pun">))</span><span class="pln"> </span><span class="pun">*</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln">deg2rad</span><span class="pun">(</span><span class="pln">lat2</span><span class="pun">))</span><span class="pln"> </span><span class="pun">*</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln">dLon </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln">dLon </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> c </span><span class="pun">=</span><span class="pln"> </span><span class="lit">2</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sqrt</span><span class="pun">(</span><span class="pln">a</span><span class="pun">),</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sqrt</span><span class="pun">(</span><span class="lit">1</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> a</span><span class="pun">));</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> d </span><span class="pun">=</span><span class="pln"> R </span><span class="pun">*</span><span class="pln"> c</span><span class="pun">;</span><span class="pln"> </span><span class="com">// Distance in km</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> d </span><span class="pun">*</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        </span><span class="kwd">function</span><span class="pln"> deg2rad</span><span class="pun">(</span><span class="pln">deg</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> deg </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">/</span><span class="pln"> </span><span class="lit">180</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
            </span><span class="tag">&lt;/body&gt;</span><span class="pln">
      </span><span class="tag">&lt;/html&gt;</span><span class="pln">
      </span>
      <span class="pln">
      /* First install : npm install mappls-web-maps */

      import { Component, OnInit, ElementRef } from '@angular/core';
      import { mappls } from 'mappls-web-maps';
      @Component({
      selector: 'app-root',
      template: '</span><span class="tag">&lt;div</span><span class="pln">  </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="pln">  </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99vh</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
          mapObject: any;
          mapplsClassObject = new mappls();
                  title = 'Animated Marker';
        mapProps = {
        center: [28.61, 77.23],
        zoomControl: true,
        location: true
        }
        ngOnInit() {

        this.mapplsClassObject.map({ id: "map", key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">", properties: this.mapProps }, (data: any) =&gt; {
            this.mapObject = data;

            new mappls().Marker({
            map: this.mapObject,
            position: {
            "lat": 28.519467,
            "lng": 77.223150
            },
            fitbounds: true,
            icon_url: 'https://apis.mapmyindia.com/map_v3/1.png'
            });
            });
            }
                  }
      </span>
      <span class="pln">
      /* First install : npm install mappls-web-maps */
      
      import { mappls } from  'mappls-web-maps';
      import  './App.css';
      function  App() {
      const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
      var mapObject ;
      var mapplsClassObject=  new  mappls();
          const title = "Animated Marker"
    const mapProps = { center: [28.61, 77.23]}
    mapplsClassObject.map({ id: "map", key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">", properties: mapProps }, (data) =&gt; {
        mapObject = data;
        mapObject.addListener('load', () =&gt; {
        mapplsClassObject.Marker({
        map: mapObject,
        position: {
        "lat": 28.519467,
        "lng": 77.223150
        },
        fitbounds: true,
        icon_url: 'https://apis.mapmyindia.com/map_v3/1.png'
        });
        });
        });
              return (
         </span><span class="tag">&lt;div</span><span class="pln">  </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="pln">  </span><span class="atn">style</span><span class="pun">={</span><span class="pln">styleMap</span><span class="pun">}</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
         );
      }
      export  default  App;
      </span>