Marker with Custom Popup

    
      <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 with Custom Popup</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"> map</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.44</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26</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">
        location</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">
      </span><span class="typ">Marker1</span><span class="pln"> </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">
        position</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="str">"lat"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">28.55</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"lng"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">77.26</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">true</span><span class="pun">,</span><span class="pln">
        popupHtml</span><span class="pun">:</span><span class="pln"> </span><span class="str">"&lt;style&gt;::-webkit-scrollbar {width: 10px;} &lt;/style&gt;&lt;div style=\"max-height:150px;min-width:200px;overflow-y: scroll;\"&gt;&lt;h2 style=\"font: bold 16px arial helvetica\"&gt;Custom Popup&lt;/h2&gt;"</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                        </span><span class="str">"&lt;p style=\"font: italic 14px/20px times\"&gt;Building looks like:&lt;/p&gt;"</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                        </span><span class="str">"&lt;img style=\"width: 200px;height: 100px;\" src=\"https://www.ft.com/__origami/service/image/v2/images/raw/https%253A%252F%252Fs3-ap-northeast-1.amazonaws.com%252Fpsh-ex-ftnikkei-3937bb4%252Fimages%252F0%252F1%252F5%252F2%252F2762510-8-eng-GB%252F20170519T-CE-Info-Systems.jpg?width=700&amp;fit=cover&amp;gravity=faces&amp;dpr=2&amp;quality=medium&amp;source=nar-cms\"&gt;"</span><span class="pun">+</span><span class="pln">
                        </span><span class="str">"&lt;p&gt;MapmyIndia Head Office, Delhi&lt;/p&gt;"</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                        </span><span class="str">"&lt;a href=\"https://www.mappls.com\"&gt;Mappls Maps&lt;/a&gt;&lt;/div&gt;"</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="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 = 'Marker with Custom popup';
      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.55,
				"lng": 77.26
			},
			fitbounds: true,
			popupHtml: "</span><span class="tag">&lt;style&gt;</span><span class="pun">::-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">scrollbar </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;}</span><span class="pln"> </span><span class="tag">&lt;/style&gt;&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"max-height:150px;min-width:200px;overflow-y: scroll;\"</span><span class="tag">&gt;&lt;h2</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"font: bold 16px arial helvetica\"</span><span class="tag">&gt;</span><span class="pln">Custom Popup</span><span class="tag">&lt;/h2&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"font: italic 14px/20px times\"</span><span class="tag">&gt;</span><span class="pln">Building looks like:</span><span class="tag">&lt;/p&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"width: 200px;height: 100px;\"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">\"https://www.ft.com/__origami/service/image/v2/images/raw/https%253A%252F%252Fs3-ap-northeast-1.amazonaws.com%252Fpsh-ex-ftnikkei-3937bb4%252Fimages%252F0%252F1%252F5%252F2%252F2762510-8-eng-GB%252F20170519T-CE-Info-Systems.jpg?width=700&amp;fit=cover&amp;gravity=faces&amp;dpr=2&amp;quality=medium&amp;source=nar-cms\"</span><span class="tag">&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;p&gt;</span><span class="pln">MapmyIndia Head Office, Delhi</span><span class="tag">&lt;/p&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">\"https://www.mappls.com\"</span><span class="tag">&gt;</span><span class="pln">Mappls Maps</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span><span class="pln">",
		});
	});
      }
      }
      </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 = "Marker with Custom Popup"
      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.55,
				"lng": 77.26
			},
			fitbounds: true,
			popupHtml: "</span><span class="tag">&lt;style&gt;</span><span class="pun">::-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">scrollbar </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;}</span><span class="pln"> </span><span class="tag">&lt;/style&gt;&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"max-height:150px;min-width:200px;overflow-y: scroll;\"</span><span class="tag">&gt;&lt;h2</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"font: bold 16px arial helvetica\"</span><span class="tag">&gt;</span><span class="pln">Custom Popup</span><span class="tag">&lt;/h2&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"font: italic 14px/20px times\"</span><span class="tag">&gt;</span><span class="pln">Building looks like:</span><span class="tag">&lt;/p&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="pln">\</span><span class="atv">"width: 200px;height: 100px;\"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">\"https://www.ft.com/__origami/service/image/v2/images/raw/https%253A%252F%252Fs3-ap-northeast-1.amazonaws.com%252Fpsh-ex-ftnikkei-3937bb4%252Fimages%252F0%252F1%252F5%252F2%252F2762510-8-eng-GB%252F20170519T-CE-Info-Systems.jpg?width=700&amp;fit=cover&amp;gravity=faces&amp;dpr=2&amp;quality=medium&amp;source=nar-cms\"</span><span class="tag">&gt;</span><span class="pln">"+
			"</span><span class="tag">&lt;p&gt;</span><span class="pln">MapmyIndia Head Office, Delhi</span><span class="tag">&lt;/p&gt;</span><span class="pln">" +
			"</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">\"https://www.mappls.com\"</span><span class="tag">&gt;</span><span class="pln">Mappls Maps</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span><span class="pln">",
		});
	});
      });
      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>