Introduction

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

Our APIs, SDKs, and live updating map data available for 200+ nations and territories give developer-friendly, easy-to-integrate plugins to add capabilities like intelligent search and routes on map, to your web or mobile applications.

Create your own Angular/React/Ionic/Cordova Based native app powered by Mappls Maps and deploy them to various platforms be it web or native mobile platforms.

Package name : mappls-web-maps

Sign up for Mappls

Not a mappls user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a mappls key. You can create and manage your access tokens on your Mappls Account page.

API Usage

Your MapmyIndia Maps SDK usage needs a set of license keys (get them here ) and is governed by the API terms and conditions. As part of the terms and conditions, you cannot remove or hide the MapmyIndia logo and copyright information in your project. Please see branding guidelines on MapmyIndia website for more details. The allowed hits are described on the plans page. Note that your usage is shared between platforms, so the API hits you make from a web application, Android app or an iOS app all add up to your allowed daily limit.

Version History

Version	Last Updated	Author	Remarks
3.0	05 April 2022	MapmyIndia API Team (MS)	Initial Commit
3.0	02 December 2022	MapmyIndia API Team (PK)	Document Update

Supported Technologies

• Node.js
• Angular
• React JS
• Cordova
• Ionic

Supported Platforms

• Web
• Android
• iOS

Getting Started

Components

• Map
  • Properties
  • Methods
  • Events
  • Markers
    • Adding a marker
    • Marker Methods
    • Marker Events
    • Adding Multiple Markers
• InfoWindows
• Polylines
• Polygons
• Circle
• Overlays
  • Geojson
  • KML
  • Heat Map

Plugins

• Place Search
• Place Picker
• Nearby Search
• Directions
• getDistance
• marker-plugin
• Eloc-Plugin
• routeSummary Plugin

Installation

npm  i  mappls-web-maps

Import Package

• Angular : Import mappls class from mappls-web-maps package i.e. app.component.ts ( or other component of your use case ) .

   import { mappls, mappls_plugin } from 'mappls-web-maps';

• React JS : Import mappls class from "mappls-web-maps" package inside app.js ( or other component of your use case ).

  import { mappls, mappls_plugin } from  'mappls-web-maps'

Implementation

Loading a Map

• Angular / Cordova / Ionic

  import { Component, OnInit } from  '@angular/core';
  import { mappls, mappls_plugin } from  'mappls-web-maps'
  
  @Component({
  selector:  'app-root',
  template  :  '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
  styleUrls: ['./app.component.css']
  })
  
  export  class  AppComponent  implements  OnInit {
  mapObject:  any;
  mapplsClassObject =  new  mappls();
  mapplsPluginObject =  new  mappls_plugin();
  
  mapProps = { center: [28.6330, 77.2194], traffic:  false, zoom:  4, geolocation:  false, clickableIcons:  false }
  
  	ngOnInit() {
  		this.mapplsClassObject.initialize("token",()=>{
  			this.mapObject  =  this.mapplsClassObject.Map({id:  "map", properties:  this.mapProps});
  
  			//load map layers/components after map load, inside this callback (Recommended)
  			this.mapObject.on("load", ()=>{
  			// Activites after mapload
  			})
  
  		});
  	}

• React JS

  import { mappls, mappls_plugin} from  'mappls-web-maps';
  function  App() {
  const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
  const  mapProps  = { center: [28.6330, 77.2194], traffic:  false, zoom:  4, geolocation:  false, clickableIcons:  false }
  var mapObject ;
  var mapplsClassObject=  new  mappls();
  var mapplsPluginObject =  new  mappls_plugin();
  
  	mapplsClassObject.initialize("token",()=>{
  		mapObject = mapplsClassObject.Map({id:  "map", properties: mapProps});
  
  		//load map layers/components after map load, inside this callback (Recommended)
  		mapObject.on("load", ()=>{
  		// Activites after mapload
  		})
  
  	});
  
  
  
  return (
  <div>
  <div  id="map"  style={styleMap}></div>
  </div>
  );
  }
  export  default  App;

That’s All !

For any queries and support, please contact:

Email us at [email protected]

Support

Need support? contact us!

© Copyright 2023 CE Info Systems Ltd. All Rights Reserved.

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223