Place Picker Plugin for Mappls Web Maps¶

Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications

Powered with India's most comprehensive and robust mapping functionalities. Now Available for 200+ nations and territories accross the world.

Getting Access¶

Before using the API in the your solution, please ensure that the related access is enabled in the Mappls Console, within your app - be it for Mobile OR Web or Cloud integration.

Copy and paste the key from your credentials section from your API keys into the access_token query parameter.
- Your static key can be secured by whitelisting its usage for particular IPs (in case of cloud app usage) OR a set of domains (in case of a web app)
- Your static key obtained from your Console is to be passed as a query parameter: access_token.
The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Place Picker Plugin. See Sample Codes here

Authentication Object - `access_token` mandatory query parameter.¶

access_token: "hklmgbwzrxncdyavtsuojqpiefrbhqplnm".

Document Version History¶

Version	Last Updated	Team	Author	Remarks
1.0	07 Aug 2025	SDK Product Team	Prabhjot Kaur (PK)	OAuth 2

Introduction¶

A simple plugin / widget to pick places from the map. This SDK also has integrated Place Picker Plugin as optional component that enables one to narrow down to picked place by searching for it first and then changing the position of the resulting point on map to fine-tune the results.

The plugin can be used in combination with our Interactive Map JS library but it also possesses the adaptability to be used as an independent plugin within any web app implementation. Thus it enables developers to include Mappls Places JS in their own customized solutions easily.

The SDK offers the following basic functionalities: 1. Ability to pick or search places directly with or without Mappls Maps visual interface. 2. A mappls.placePicker() method to initiate the plugin and pick places from Mappls Maps. 3. Ability to get information from Mappls Place Picker plugin through a callback. 4. Include the Place Picker Plugin with or without an interactive Map component.

Sample Implementation¶

Visit the samples for assistance to create a sample implementation with your own keys.

For detailed understanding of the plugin, Let’s get started!

Plugin's Configurations¶

Adding the Nearby Search plugin in the script

<script src="https://sdk.mappls.com/map/sdk/plugins?access_token=<Static Key>&v=3.0&libraries=placePicker"></script>

1. Initializing the Place Picker plugin¶

Method¶

mappls.placePicker()

 /*Place Picker plugin initialization*/
var options = {
  map: map,
  header: true,
  closeBtn: true,
  pinImage: "https://apis.mapmyindia.com/map_v3/1.png",
  snapToEntry: true, // default false
  snappingRadius: 50, // default 50 --> (snappingRadius > 10 and snappingRadius < 200)
  entryMarkerStyle: {
    size: 10, // default 10
    color: "blue", // default '#ff0000'
    strokeWidth: 4, // default 2
    strokeColor: "", // default '#ffffff'
    /* fillColor: '00000',
                     fillopacity: 1,
                     lineColor: 'FFFFFF',
                     linewidth: 5,
                     lineopacity: 1, */

  },
};
mappls.advancePlacePicker(options, callback);
function callback(data) {
  picker = data;
  console.log(picker);
  setTimeout(() => {
    if (picker.data) {
      /*  alert(picker.data.formatted_address); */
    }
  }, 700);
}

Mandatory Parameters¶

Place Options: any object containing any of the two following mandatory configurations values.
- map: object > vector map or raster map object from respective Mappls Map JS
OR¶
- location: (lat,lng) object // to get data without map.
callback: (method): to get data after location selection . If no callback method is specified, UI GET button will be hidden. In this case, the consuming app can get data by calling method getData().

Optional Parameters¶

Place Options: any object containing optional configurations for modifying the search request.
- location: location coordinates which will be used as radial bias (not restriction; only BIAS). e.g. location:[28.61, 77.23]
- geolocation: boolean value used to enable or disable current location selection . Default is true.
- closeBtn: (boolean): to give the option to close Place Picker (including hiding the top bar that has search & lower bar area that has the 'Done' button and related sub-text). Default is true.
- closeBtn_callback: A callback method that is called when user clicks on the close button at the top left. To provide a call to action upon user closing the Place Picker plugin and thus providing the ability to continue towards further action by the consuming app.
- search: (boolean): To enable / disable the integrated Place Search plugin. Default is true.
- topText: The banner text to show at the top as title of the Place Picker plugin. Default is Place Picker.
- pinImage: (URL) The PIN icon on the map.
- pinHeight: (number). To adjust the placement of the PIN icon on the map.
- searchChars : number of characters required to start search. e.g searchChars:2
- region : To specify the region for various api response.e.g region : "USA"
- snapToEntry : To snap to the entry point of the location. default value is false
- snappingRadius : To specify the snapping radius.
- entryMarkerStyle : To modify the entry marker style.
- size: 10, // default 10
- color: "blue", // default '#ff0000'
- strokeWidth: 4, // default 2
- strokeColor: "", // default '#ffffff'
- fillColor: '00000',
- fillopacity: 1,
- lineColor: 'FFFFFF',
- linewidth: 5,
- lineopacity: 1,

2. Calling Mappls Place Picker for programmatically fixed text¶

Following is an example of calling Mappls.placePicker() method programmatically for a fixed pair of coordinates rather than depending on a UI driven approach:

/*CALL for coordinates - LIKE THIS*/
mappls.placePicker({location:{lat:28.9898,lng:77.9898}},callback);

3. Method for removing place picker plugin with callback from map¶

Method¶

remove()

obj.remove();

4. Method for programmatically setting location within callback on map.¶

Method¶

setLocation()

obj.setLocation({lat:28.42424,lng:77.232323});

5. Method for getting location data from Place Picker plugin.¶

Description¶

This method is especially useful if no callback is given in options. As per the current status of the Place Picker plugin's UI (map view and placement of PIN on map), the location data is returned.

Method¶

getLocation()

obj.getLocation();

Response Structure of Place Picker Data¶

{   
    area: "India", //country information
    city: "New Delhi", // city of the pinned place.
    district: "South East Delhi District", // district of the pinned place.
    formatted_address: "Industrial Estate Phase 1, New Delhi, Delhi, India", // complete formatted address of the pinned place.
    houseName: "Equalisatcon Pump House", // house name of the pinned place.
    houseNumber: "", // house number of the pinned place.
    lat: "28.5237002235929", // latitude of the pinned place as per input coordinates.
    lng: "77.28024601936342", // longitude of the pinned place as per input coordinates.
    locality: "Okhla Industrial Estate Phase 1", // locality number of the pinned place.
    pincode: "110020", // PIN of the pinned place.
    poi: "BSES", // POI reference for the pinned place.
    poi_dist: "78", // Referenced POI's distance from the pinned place.
    responsecode: 200, // Response code of the Place Plugin
    state: "Delhi", // state of the pinned place.
    street: "Unnamed Road", // Street reference for the pinned place.
    street_dist: "16", // Referenced street's distance from the pinned place.
    subDistrict: "Kalkaji", // subdistrict of the pinned place.
    subLocality: "Block C", // sublocality of the pinned place.
    subSubLocality: "", // subsublocality of the pinned place.
    village: "" // village of the pinned place.
}

That's All ! Visit the samples for assistance to create a sample implementation with your own keys.

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!