Default Place Search

 
<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">Default Place Search</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">"width=device-width, 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">name</span><span class="pun">=</span><span class="atv">"description"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"Default Place Search"</span><span class="tag">&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">"&gt;</span><span class="tag">&lt;/script&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_plugins</span><span class="pun">?</span><span class="pln">v</span><span class="pun">=</span><span class="lit">3.0</span><span class="str">"&gt;</span><span class="tag">&lt;/script&gt;</span><span class="pln">
          </span><span class="tag">&lt;style&gt;</span><span class="pln">
        body </span><span class="pun">{</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">
        </span><span class="com">#map {width: 100%;height: 100vh;margin: 0;padding: 0; }</span><span class="pln">
        </span><span class="com">#auto { width: 300px; position: absolute;z-index: 999;  font-size: 15px;  padding: 10px; border: 1px solid #ddd; outline: none !important;</span><span class="pln">
            top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</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">
    </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;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"auto"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"auto"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search-outer form-control as-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Search places or eLoc's..."</span><span class="pln"> </span><span class="atn">required</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">spellcheck</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&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">marker</span><span class="pun">;</span><span class="pln">
        </span><span class="com">/*Map Initialization*/</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> initMap1</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.09</span><span class="pun">,</span><span class="pln"> </span><span class="lit">78.3</span><span class="pun">],</span><span class="pln">
                zoom</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">
            map</span><span class="pun">.</span><span class="pln">addListener</span><span class="pun">(</span><span class="str">'load'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> optional_config </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="com">/* location: [28.61, 77.23], */</span><span class="pln">
                    region</span><span class="pun">:</span><span class="pln"> </span><span class="str">"IND"</span><span class="pun">,</span><span class="pln">
                    height</span><span class="pun">:</span><span class="lit">300</span><span class="pun">,</span><span class="pln">
                    </span><span class="com">/* geolocation:true,
                    pod:'City',
                    bridge:true,
                    tokenizeAddress:true,
                    filter:'cop:9QGXAM',
                    hyperLocal:true, //Default is false. Location parameter is mandatory to use this parameter.
                    distance:true,
                    width:300,
                    height:300,
                    clearButton:false, //to hide cross button, which is right side of search input
                    blank_callback:function(){console.log("called when click on cross button or input value become blank");} */</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="pln">search</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="str">"auto"</span><span class="pun">),</span><span class="pln"> optional_config</span><span class="pun">,</span><span class="pln"> callback</span><span class="pun">);</span><span class="pln">
                </span><span class="kwd">function</span><span class="pln"> callback</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    alert</span><span class="pun">(</span><span class="str">'Data: '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">));</span><span class="pln">
                    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">data</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">data</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"> dt </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">[</span><span class="lit">0</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">dt</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
                        </span><span class="kwd">var</span><span class="pln"> eloc </span><span class="pun">=</span><span class="pln"> dt</span><span class="pun">.</span><span class="pln">eLoc</span><span class="pun">;</span><span class="pln">
                        </span><span class="kwd">var</span><span class="pln"> place </span><span class="pun">=</span><span class="pln"> dt</span><span class="pun">.</span><span class="pln">placeName </span><span class="pun">+</span><span class="pln"> </span><span class="str">", "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> dt</span><span class="pun">.</span><span class="pln">placeAddress</span><span class="pun">;</span><span class="pln">
                        </span><span class="com">/*Use elocMarker Plugin to add marker*/</span><span class="pln">
                        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">marker</span><span class="pun">)</span><span class="pln"> marker</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">();</span><span class="pln">
                        mappls</span><span class="pun">.</span><span class="pln">pinMarker</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">
                            pin</span><span class="pun">:</span><span class="pln"> eloc</span><span class="pun">,</span><span class="pln">
                            popupHtml</span><span class="pun">:</span><span class="pln"> place</span><span class="pun">,</span><span class="pln">
                            popupOptions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                openPopup</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">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">){</span><span class="pln">
                            marker</span><span class="pun">=</span><span class="pln">data</span><span class="pun">;</span><span class="pln">
                            marker</span><span class="pun">.</span><span class="pln">fitbounds</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="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>