Skip to main content

Directions Plugin for Mappls Web Maps

Getting Access​

Before using the Plugin in the your solution, please ensure that the related access is enabled in the Mappls Console, in the same project you set up for the Maps SDK.

  1. Copy and paste the generated access token from your API keys available in the dashboard in the sample code for interactive map development.
    • This APIs follow OAuth2 based security.
    • Access Token can be generated using Token Generation API.
    • To know more on how to create your access tokens, please use our authorization API URL. More details available here
    • The access token is a valid by default for 24 hours from the time of generation. This can be configured by you in the API console.
  2. The sample codes are provided on our domain to help you understand the very basic functionality of Mappls PIN (eLoc) Plugin. See Sample Codes here

Introduction​

A simple plugin / widget to render details of a particular place. The Place Details plugin for MapmyIndia Web Map JS library is provided as a means to enable rendering of MapmyIndia Places on MapmyIndia Maps.

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 map implementation. Thus it enables developers to include MapmyIndia Places SDK in their own customized solutions easily.

The SDK offers the following basic functionalities:

  1. Ability to render places directly on map with reference to the provided eLoc(s).
  2. A getPinDetails() method to fetch the details of a place.
  3. Customizable markers
  4. Remove markers from map.

Sample Implementation​

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

For detailed understanding, Let’s get started!

Plugin's configurations​

Adding the Place Details plugin in the script

Script URL​

<script src="https://apis.mappls.com/advancedmaps/api/{access_token}/map_sdk_plugins?v=3.0&libraries=getPinDetails"></script>

Initializing the Place Details plugin​

Method​

Mappls.getPinDetails()

Mappls.getPinDetails({ map: map, pin: '3F45CB'}, callback);

Mandatory Parameters​

  1. getPinDetails: The pin (Mappls Pin/Eloc) whose details are required.
  2. callback: to return data to a specified callback method.

Optional Parameters​

  1. map: Map Object
  2. icon: custom icon url.
  3. divId: The div to put the result in.
  4. markerPopup (boolean): to show pop-ups on marker click. Default is true.(example: markerPopup:true)
  5. popupHtml: to show html pop up on marker click. User should define values to be shown while using this parameter.(example: obj.setPopup({content:"<h1>Hello MapmyIndia</h1>"}))
  6. fitbounds (boolean): To show all rendered eLoc(s) in a single view bound. (example: fitbounds:true)
  7. fitboundOptions : padding in fitbounds, if any. (Example: { padding:50,maxZoom:18})
  8. infoDiv (boolean): To render html div on map or not. Default is true. (example: infoDiv:true)
  9. click_callback: method to call on click of callback.

Method to remove the markers with callback populated by Place Details Plugin​

pinObj.remove();

Method to set up the div content for populating details from getEloc() plugin​

pinObj.setDivContent(“Div html);

Method to set up the pop up content on marker as html.​

For Eg:

pinObj.setPopup({content:"<h1>Hello Mappls</h1>"});