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 class="top-div">
  <span class="top-div-span1">MapmyIndia Maps API: </span>
  <span class="top-div-span2">Map Marker Example</span>
</div>
<div id="result">
  <div class="btn-div"><button id="mapmyindia_sample_marker">Add Default Marker</button></div>
  <div class="btn-div"><button id="mapmyindia_custom_marker">Add Custom Marker</button></div>
  <div class="btn-div"><button id="mapmyindia_multiple_markers">Add Multiple Markers</button></div>
  <div class="btn-div"><button id="mapmyindia_number_on_marker">Add Number on Markers</button></div>
  <div class="btn-div"><button id="mapmyindia_text_on_marker">Add Text to Markers</button></div>
  <div class="btn-div"><button id="mapmyindia_Arrow_marker">Arrow Markers</button></div>
  <div class="btn-div"><button id="mapmyindia_draggable_marker">Make Marker Draggable</button></div>
  <div class="btn-div"><button id="removeMarker">Remove Marker(s)</button></div>

  <div class="msg-cont">
    <ul class="msg-list">
      <li>Double click anywhere on the map to add a marker.</li>
      <li>Click/drag marker to see events.</li>
    </ul>
  </div>
  <div class="event-header">Event Logs</div>
  <div id="event-log"></div>
</div>
<div id="map"></div>

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
 }

 .top-div {
   border-bottom: 1px solid #e9e9e9;
   padding: 10px 12px;
   background: #fff;
 }

 .top-div-span1 {
   font-size: 20px;
 }

 .top-div-span2 {
   font-size: 16px;
   color: #777
 }

 .btn-div {
   padding: 16px 12px 6px 38px;
 }

 .msg-cont {
   padding: 6px 12px 1px;
   border-bottom: 1px solid #e9e9e9;
 }

 .msg-list {
   line-height: 20px;
   font-size: 12px;
   color: #555;
 }

 .event-header {
   padding: 14px 12px 6px 38px;
   color: #666;
 }

 #event-log {
   padding: 6px 12px 6px 38px;
   color: #777;
   font-size: 12px;
   line-height: 22px;
 }

 .map_marker {
   position: relative;
   width: 34px;
   height: 48px
 }

 /*marker text span css*/

 .my-div-span {
   position: absolute;
   left: 1.5em;
   right: 1em;
   top: 1.4em;
   bottom: 2.5em;
   font-size: 9px;
   font-weight: bold;
   width: 1px;
   color: black;
 }

JavaScript

var map = null;
var marker = [];
var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842];
var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195];
//var pth = window.location.href; /*get path of image folder*/
var full_path = "http://www.mapmyindia.com/api/advanced-maps/doc/sample";
window.onload = function() {
  map = new MapmyIndia.Map('map', {
    center: [28.549948, 77.268241],
    zoomControl: true,
    hybrid: true
  });
  /***
   1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional...
   2. All leaflet mapping functions can be called simply by using "L" object.
   3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, 
   which will be clearly documented in the MapmyIndia API documentation section.
   ***/

  /***map-events****/
  map.on("dblclick", function(e) {
    var title = "Text marker sample!";
    marker.push(addMarker(e.latlng, "", title));
  });
};

function addMarker(position, icon, title, draggable) {
  /* position must be instance of L.LatLng that replaces current WGS position of this object. Will always return current WGS position.*/
  var event_div = document.getElementById("event-log");
  if (icon == '') {
    var mk = new L.Marker(position, {
      draggable: draggable,
      title: title
    }); /*marker with a default icon and optional param draggable, title */
    mk.bindPopup(title);
  } else {
    var mk = new L.Marker(position, {
      icon: icon,
      draggable: draggable,
      title: title
    }); /*marker with a custom icon */
    mk.bindPopup(title);
  }
  map.addLayer(mk); /*add the marker to the map*/
  /* marker events:*/
  mk.on("click", function(e) {
    event_div.innerHTML = "Marker clicked<br>" + event_div.innerHTML;
  });

  return...