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 style="font-size: 20px">MapmyIndia Maps API: </span>
  <span style="font-size:16px;color:#777">Map Info Windows Example</span>
</div>

<div id="result">
  <div class="btn-div"><button onclick="mapmyindia_show_info_window()">Default Info Window</button></div>
  <div class="btn-div"><button onclick="mapmyindia_open_fancy_info_window()">A Better Info Window</button></div>
  <div class="btn-div"><button onclick="mapmyindia_custom_info_window()">A Custom Info Window</button></div>
  <div class="btn-div"><button onclick="mapmyindia_hide_info_window()">Hide Info Window</button></div>

  <div class="msg-cont">
    <ul class="msg-list">
      <li>Click on the marker to show an info window.</li>
      <li>Click on the map to create a new marker with popup.</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;
}

.info_css {
  color: #000;
  text-decoration: none;
  background-color: #fff;
  width: 270px;
  padding: 5px;
  font-size: 12px;
}

div.header {
  position: relative;
  background-color: #191919;
  color: #fff;
  line-height: 20px;
  font-size: 13px;
  vertical-align: middle;
  padding: 5px 35px 5px 5px;
}

.header .close {
  position: absolute;
  right: 5px;
  top: 5px;
}

button {
  width: 220px;
  font-family: Verdana, sans-serif, Arial;
  font-size: 12px;
  padding: 2px 0;
  color: #333;
}

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

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

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

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

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

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

.info-div {
  padding: 10px;
  font-size: 13px;
}

custom-info {
  padding: 10px;
  font-size: 13px;
}

JavaScript

var map;
var info = [];
var visbility = false;
var mk3, mk4, mk5;

window.onload = function() {
  var center = new L.latLng(28.549948, 77.268241); /*WGS location object*/
  var pt1 = new L.latLng(28.549948, 77.268241); /*WGS location object*/
  var pt2 = new L.latLng(28.552232, 77.268941); /*WGS location object*/
  var pt3 = new L.latLng(28.551748, 77.269022); /*WGS location object*/
  var pt4 = new L.latLng(28.551738, 77.270164); /*WGS location object*/
  var pt5 = new L.latLng(28.548602, 77.271546); /*WGS location object*/
  var pt6 = new L.latLng(28.554603, 77.268305); /*WGS location object*/
  map = new MapmyIndia.Map('map', {
    center: center,
    zoomControl: true,
    hybrid: true,
    zoom: 17
  });
  /*
   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 = "Sample Text Marker!";
    var m = addMarker(e.latlng, '', title);
    m.bindPopup(title).openPopup();
    var event_div = document.getElementById("event-log");
    event_div.innerHTML = "New marker created! <br>" + event_div.innerHTML;
  });

  /***content for custom info window***/
  var cont = "<div><h2 style=\"font: bold 16px arial helvetica\">Complex Info Window</h2>" +
    "<p style=\"font: italic 14px/20px times\">This content is made of custom styled elements.</p>" +
    "<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
    "The heading level 2 has custom set style, and so does the previous paragraph.<br>" +
    "But guess what, this paragraph also has custom style.</p>" +
    "<p style=\"font: 12px/14px...