Menu
Close

Default Place Search

Sample Implementation

 

  <html>
  <head>
    <title>Default Place Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Default Place Search">

        <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; }
        #auto { width: 300px; position: absolute;z-index: 999;  font-size: 15px;  padding: 10px; border: 1px solid #ddd; outline: none !important;
            top: 5px;border-radius: 10px;margin: 4px; }
    </style>
    </head>
    <body>
        <div id="map"></div>
        <input type="text" id="auto" name="auto" class="search-outer form-control as-input" placeholder="Search places or eLoc's..." required="" spellcheck="false">
            <script>
        var map,marker;
        /*Map Initialization*/
        function initMap1(){
            map = new mappls.Map('map', {
                center: [28.09, 78.3],
                zoom: 5
            });
            map.addListener('load',function(){
                var optional_config = {
                    location: [28.61, 77.23],
                    region: "IND",
                    height:300,
                };
                new mappls.search(document.getElementById("auto"), optional_config, callback);
                function callback(data) {
                    console.log(data);
                    if (data) {
                        var dt = data[0];
                        if (!dt) return false;
                        var eloc = dt.eLoc;
                        var place = dt.placeName + ", " + dt.placeAddress;
                        /*Use elocMarker Plugin to add marker*/
                        if (marker) marker.remove();
                        mappls.pinMarker({
                            map: map,
                            pin: eloc,
                            popupHtml: place,
                            popupOptions: {
                                openPopup: true
                            }
                        }, function(data){
                            marker=data;
                            marker.fitbounds();
                        })
                    }
                }
            });
        }
    </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