Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications
Powered with India's most comprehensive and robust mapping functionalities. Now Available for Srilanka, Nepal, Bhutan, Myanmar and Bangladesh
You can get your api key to be used in this document here: https://www.mapmyindia.com/api/signup
- Supported frameworks: The sample is prepared in Pure JS.
- CORS to be ENABLED: You need to ask API Support to enable CORS for your credentials.
- This sample is provided as a reference only and users can adjust and enhance it to suit their requirements.
Sample Example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// Interactive Map JS
<script src="https://apis.mapmyindia.com/advancedmaps/v1/<Map_Key>/map_load?v=1.3"></script>
// Map Style
<style>
#map{
height: 70vh;
width: 100%;
}
</style >
</head>
<body onload="Auth_token_generate();">
<div id="map"></div><br> // div for map
<button onclick="auto();">autosuggest</button>
<button onclick="geocoding();">geocoding</button>
<button onclick="rev_geocode();">rev_geocode</button>
<button onclick="Many_to_Many_distance_matrix();">Many_to_Many_distance_matrix</button>
<button onclick="distance_matrix();">distance_matrix</button>
<button onclick="route();">Draw route</button>
<!-- // logic -->
<script>
// Creating Map
var map = new MapmyIndia.Map('map',
{
center: [28.04, 78.2],
zoom: 12
});
var token; function jsonp(url, callback) {
const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
const script = document.createElement('script');
script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
document.body.appendChild(script);
window[callbackName] = function(data) {
delete window[callbackName];
document.body.removeChild( script );
callback(data);
};
} function Auth_token_generate(){
$.ajax({
data: {
"grant_type": "client_credentials",
"client_id": "<client_id>",
"client_secret": "<client_secre>"
},
headers: {
"Content-Type": "application/x-www-form-urlencoded",
}, method: 'POST',
crossDomain: true,
async: true,
url: 'https://outpost.mapmyindia.com/api/security/oauth/token',
error: function (data) {
console.log(data);
alert('An error has occurred');
},
success : function (data) {
token = data.access_token;
}}
);
} function auto(){
jsonp('https://atlas.mapmyindia.com/api/places/search/json?
query=delhi&access_token='+token,
function(data) {
console.log(data);
alert(JSON.stringify(data));
});
} function geocoding(){
jsonp('https://atlas.mapmyindia.com/api/places/geocode?address=mapmyindia 237 okhla
phase 3&access_token='+token,
function(data) {
console.log(data);
alert(JSON.stringify(data));
});
} function rev_geocode(){
jsonp('http://apis.mapmyindia.com/advancedmaps/v1/'+token+'/rev_geocode?lat=26.5645&lng=85.9914',
function(data) {
console.log(data);
alert(JSON.stringify(data));
});
} function Many_to_Many_distance_matrix(){
jsonp('https://apis.mapmyindia.com/advancedmaps/v1/<Your_rest_api>/distance_matrix/driving/77.983936,28.255904;77.05993,28.487555;77.15993,28.587555;77.264997,28.554534?sources=0;1&destinations=2;3',
function(data) {
console.log(data);
alert(JSON.stringify(data));
});
} function distance_matrix(){
jsonp('https://apis.mapmyindia.com/advancedmaps/v1/<Your_rest_api>/distance_matrix/driving/90.33687,23.470314;90.379249,23.497178;90.497009,23.546286?rtype=1®ion=bgd',
function(data) {
console.log(data);
alert(JSON.stringify(data));
});
} function route(){
jsonp('https://apis.mapmyindia.com/advancedmaps/v1/<Key>/route_adv/driving/77.227434,28.610981;77.212021,28.616679;77.252021,28.616879;77.292021,28.616699?alternatives=true&&geometries=polyline&overview=full&exclude=&steps=true®ion=ind',
function(data) {
console.log(data);
});
} </script>
</body>
</html>That's it folks !!!
For any queries and support, please contact:
Email us at apisupport@mapmyindia.com
© Copyright 2019. CE Info Systems Pvt. Ltd. All Rights Reserved. | Terms & Conditions