JSFiddle - React, Tailwind, and code Playground

by mapmyindia_map

HTML

<script src="https://apis.mapmyindia.com/advancedmaps/v1/your_map_key_here/map_load?v=1.3"></script>

<div style="border-bottom: 1px solid #e9e9e9;padding:10px 12px;"><span style="font-size: 20px">MapmyIndia Maps API: </span><span style="font-      size:16px;color:#777">Map Properties and Events</span></div>
            
<div id="result">
<div style="padding: 16px 12px 6px 38px"><button onclick="mapmyindia_current_zoom_level()" style="width: 220px;">Get current zoom level</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_current_center_location()" style="width: 220px;">Get current map center</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_current_bound()" style="width: 220px;">Get current map bound</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_map_pan()" style="width: 220px;">Map pan</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_move_to_center()" style="width: 220px;">Move to center</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_set_zoom()" style="width: 220px;">Set zoom level</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_set_center_and_zoom_level()" style="width: 220px;">Set center and zoom level</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_array_of_location_fit_into_bound()" style="width: 220px;">Array of location fit into Bound</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_zoom_in()" style="width: 220px;">Zoom in</button></div>
            <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_zoom_out()" style="width: 220px;">Zoom out</button></div>
            <div style="padding:6px 12px 1px; border-bottom:1px solid #e9e9e9"><ul style=" line-height: 20px;...

CSS

html { height: 100%; }
            body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; }
             #map {
                position: absolute;
                left: 312px; top: 46px; 
                right: 2px; bottom: 2px; 
                border: 1px solid #cccccc; }
            #result {
                position: absolute;
                left: 2px; top: 46px;
                width: 306px;
                bottom: 2px; 
                border: 1px solid #cccccc;
                background-color: #FAFAFA;
                overflow: auto;
            }
             button{width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333}
             
             



/*  body {
   height: 100%;
   font-family: Verdana, sans-serif, Arial;
   color: #000;
   margin: 0;
   font-size: 14px;
   padding: 0;
 }
 
 #map {
   position: absolute;
   left: 312px;
   top: 46px;
   right: 2px;
   bottom: 2px;
   border: 1px solid #cccccc;
 }
 
 #result {
   position: absolute;
   left: 2px;
   top: 46px;
   width: 306px;
   bottom: 2px;
   border: 1px solid #cccccc;
   background-color: #FAFAFA;
   overflow: auto;
 }
 
 button {
   width: 220px;
   font-family: Verdana, sans-serif, Arial;
   font-size: 12px;
   padding: 2px 0;
   color: #333;
   width: 220px;
 }
 
 #result div {
   padding: 16px 12px 6px 38px;
 }
 
 #event-log {
   padding: 6px 12px 6px 38px;
   color: #777;
   font-size: 12px;
   line-height: 22px;
 }
 
 ul {
   line-height: 20px;
   font-size: 12px;
   color: #555;
 }
 */

JavaScript

var map = null;
            window.onload = function() {
                var centre = new L.LatLng(28.549948, 77.268241);
                map=new MapmyIndia.Map('map',{center:centre,zoomControl: true,hybrid:true });
                    /*1.create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passsing it at the minimum div object, all others are optional...
                    2.all leaflet mapping functions can be called simply on the L object
                    3.MapmyIndia may extend and in future modify the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section.*/
                    
                    

                var event_div = document.getElementById("event-log");
                /***map-events****/
                map.on("dblclick", function(e) {
                    var pt = e.latlng;/*event returns lat lng of clicked point*/
                   event_div.innerHTML= "dbclick:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML;
                });
                map.on("click", function(e) {
                    var pt = e.latlng;/*event returns lat lng of clicked point*/
                   event_div.innerHTML= "click:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML;
                });
                map.on("resize", function(e) {
                    event_div.innerHTML="map resized</br>" + event_div.innerHTML;
                });
                map.on("mouseup", function(e) {
                    var pt = e.latlng;/*event returns lat lng of current point*/
                    event_div.innerHTML = "mouseup:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML;
                });
                map.on("mousedown", function(e) {
                    var pt = e.latlng;/*event returns lat lng of current point*/
                    event_div.innerHTML =...