Mappls Web Maps JS

The main branch contains the documentation for releases using the updated Authorization & Authentication mechanism introduced in August 2025. > If you wish to use the releases that use the legacy authentication method based on OAuth 2.0, please refer to the auth-legacy branch.

Explore the largest Mappls directory of APIs & SDKs for maps, routes and search.

Our APIs, SDKs, and live updating map data available for 200+ countries & territories to give developer's tool to build better mapping, navigation, and search experiences across different platforms.

This page will be continually enhanced to offer more insights and reference materials on how to best utilize our Vector Maps JS SDK for Web.

You can get your api key to be used for access here: https://auth.mappls.com/console

• Mappls Web Maps JS - Introduction - Web Map Features - Getting Access - Authentication Object - accesstoken mandatory query parameter. - Getting Started - Understanding Map Methods, Events \& Properties - Adding the Map Script to your web page - Map Methods, Events \& Properties - Markers - Types of Markers - Marker Implementation - Marker Methods,Events \& Properties - Markers Quick Reference: - View Sample Codes for Quick Reference - Heat Map Overlays - HeatMap Quick Reference - Add Geojson layer - Geojson Quick Reference - KML Overlay - Important Notes to remember - Info Windows - Types of Information windows - Info Window Quick Reference - Feature Classes - Polylines - Polyline Quick Reference - Check out our vast list of sample codes for different polylines styles. - Polygons - Polygon Quick Reference - Check out our vast list of sample codes for polygons. - Circles - Circle Quick

| Version | Remarks | Author | |--|--|--| | 1.0 | Initial Commit |Mappls API Team (PK)|

The Mappls Web Maps JavaScript SDK is a tool that enables the creation and customization of interactive maps for both India and the global context. Developed by Mappls (MapmyIndia) India's leading Map provider, this SDK is designed to produce mobile-friendly maps with a user-friendly interface and excellent performance. It consists of a set of classes and functions that allow developers to incorporate a wide range of map features into their web and mobile applications.

• Zoom: A map of India that can be panned or scrolled, allowing users to explore it in various levels of detail. The highest level of detail is achieved at a zoom level of 22, while the lowest level provides a global view at zoom level 1. - Overlays: We recognize the significance of maps in businesses, and that's why, at Mappls, we offer pre-made overlays that can be easily integrated into your code, streamlining the process and reducing the need for repetitive code. - Map Markers (Pushpins): You can pinpoint any location using the default map markers (pushpin) feature, and then you have the flexibility to customize its appearance to align with the unique style of your application. Check out the Plug-ins section for additional enhancements that can elevate your customization options. - Info Windows (Pop-ups): When a user clicks on a pushpin, an information window automatically appears, a

Note:The location settings must be turned on and must allow the site to fetch the location for this control to work.

Please Note: Mappls(MapmyIndia) may extend and enhance functionality for its interactive map API in future, which will be documented in this section, and which will be available through the Mappls.

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.

1. Copy and paste the key from your credentials section from your API keys into the accesstoken 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: accesstoken.

• accesstoken: "hklmgbwzrxncdyavtsuojqpiefrbhqplnm".

Now that you’re all caught up with the features let’s get down right to them implementing and look at how can you integrate our interactive Map to your Website from scratch.

Mappls Live Demo | CodePen Implementation

The easiest way to start loading maps in a web page is with a “Hello World” sample code, you can download or view a working “Hello World” sample from the links for adding your first marker below.

Follow the below steps to integrate Mappls interactive Maps into your existing code base or even a File -> New Project. - Declare application as HTML5: Define on top of your HTML. - Integrate Interactive maps from Mappls into your browser application by simply including Mappls's interactive map API in your script source in the head section.

Important: - Please ensure that you insert your static key in place of - v: This is the version. Please keep as the latest version: 3.0. - layer: The type of map applicable for the project. The default is vector. Alternate value is raster.

Please discuss with apisupport@mappls.com for futher clarification and support.

• Define style in the head section to load your CSS. CSS can be defined as per the developers requirement (Extenal, Internal and inline)

• Define a div object in the body tag of the HTML where you want the Mappls Map to show up.

• Initialize a Mappls Map by simply calling new Mappls.Map() in the JavaScript and passing it at the minimum, the div object in which you want the map populated. (All other parameters are optional.)

• Map Properties - Map Methods - Map Events

Utilizing markers to pinpoint locations is a hassle-free approach. You have the option to use the markers we provide as the default choice, and if you wish to use your own custom markers, we've got that aspect covered as well.

• Stock Markers: The one you get out of the box using our Interactive Vector Maps SDK and you can select from a lot of choices. - Custom Marker: In case you want to add your own markers, we’ve handled that for you as well. - HTML Marker: In case you don’t want to add in an image you can use HTML to create a marker and then plot it on the map as well.

For more details, please read article in Markers

Mappls Live Demo | Code Pen Implementation

The easiest way to start loading maps with simple markers in a web page is with sample code given on the link above, you can download or view a working sample with your authorized access keys.

Method to add marker on map

You can fine-tune the map methods, events and properties we offer to align with your unique requirements and amplify the level of customization for your map layer. These functions serve as a handy resource for promptly addressing specific events or scenarios.

• Marker Properties - Marker Methods

• Multiple Marker with cluster

• GeoJSON Bulk Marker

• Advance Cluster Marker

• Marker using HTML

• Marker with Custom Popup

• Marker with Popup

• Multiple Marker using GeoJSON

For details , please read article in Heatmap Overlays

Mappls Live Demo | Code Pen Implementation

• Heatmap on Click

• Heatmap on Overmouse

• Heatmap Properties

For details, please read article in GeoJSON

Mappls Live Demo | Code Pen Implementation

GeoJSON Supports marker, polyline and polygon addition and Style properties

Marker Property support in geojson

1. description 2. icon 3. icon-size 4. icon-offset 5. text 6. text-size 7. text-offset

Polyline Property support in geojson:

• Dashed Polyline Using GeoJson

• Multi Colored Dashed Polyline Using GeoJson

• Multiple Marker Using Geojson

• Add GeoJSON Properties

Remove Layer Method

KML: Keyhole Markup Language is a file format employed to showcase geographical data on maps. With this plugin, you have the capability to superimpose KML data onto Mappls Maps for web applications.

Mappls Live Demo | Code Pen Implementation

1. Only KML data supported. 2. KML file must have absolute path or raw KML string (in variable or in textbox) 3. All internal URL's path must be absolute. (for icon path etc) 4. File must not be password protected. 5. File must be CORS enabled from the server where they are hosted. 6. File must follow KML standard strictly.

• KML Properties: #KML-Properties

For details, please read article in KML Overlay

Mappls Live Demo | Code Pen Implementation

Info Windows provide a user-friendly method for displaying information related to a marker, essentially explaining the purpose of that marker. When users encounter a marker, their natural instinct is to click on it to discover more details, and presenting an info window is the ideal approach to fulfill this expectation.

Please Note: Our JS supports a default info window that you can leverage but we want you to have an option to customize your info window to fit in with your UI and you can do so by manipulating the CSS.

For a quick sample or a demo you can follow up with the links on live Demo

For more details , please read article in Info Windows