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><button id="curr_loc">Get current zoom level</button></div>
  <div><button id="map_center">Get current map center</button></div>
  <div><button id="curr_bound">Get current map bound</button></div>
  <div><button id="map_pan">Map pan</button></div>
  <div><button id="mov_center">Move to center</button></div>
  <div><button id="map_z_level">Set zoom level</button></div>
  <div><button id="map_cz_level">Set center and zoom level</button></div>
  <div><button id="map_fit_bound">Array of location fit into Bound</button></div>
  <div><button id="map_zoom_in">Zoom in</button></div>
  <div><button id="map_zoom_out">Zoom out</button></div>
  <div style="padding:6px 12px 1px; border-bottom:1px solid #e9e9e9">
    <ul>
      <li>Click anywhere on the map</li>
      <li>Double click anywhere on the map </li>
      <li>Mouse up on the map anywhere </li>
      <li>Mouse down on the map anywhere</li>
      <li>Change the zoom level or pan the map</li>
    </ul>
  </div>
  <div style="padding:14px 12px 6px 38px;color: #666;">Event Logs</div>
  <div id="event-log"></div>
</div>
<div id="map"></div> -->

 <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>
     ...

CSS

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 = "mousedown:</br> lat:" + pt.lat +...