Introduction
Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications
Explore through 238 nations with Global Search, Routing and Mapping APIs & SDKs powered with India's most comprehensive and robust mapping functionalities.
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 SDK 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.4 | 02 May 2022 | MapmyIndia API Team (MS) | Initial Commit |
Supported Technologies
Node.js, Angular, React JS, Cordova, Ionic
Supported Platforms
- Web
- Android
- iOS
Installation
npm i mappls-web-maps
Import Package
import { mappls } from 'mappls-web-maps';
import { mappls } from 'mappls-web-maps'
Usage
Loading a Map
import { Component, OnInit } from '@angular/core';
import { mappls } 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
})
});
}
}
import { mappls } 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();
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;
Learn about Features
- Components
- Plugins
That’s All !
Email us at apisupport@mapmyindia.com
Ask a question under the mapmyindia-api
Need support? contact us!
Read about the latest updates & customer stories