JSFiddle - React, Tailwind, and code Playground

by Mayeenul Islam

HTML

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCfdJXlJLVGNjnmsgy0b5dxZrcisxkhUHk"></script>
<div id="map"></div>

CSS

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map_container = $('#map');

if (map_container.length > 0) {
  var latitude = 23.900460,
    longitude = 90.341313;
 /*
 // Uttara Center (Land)
 var latitude = 23.875029,
    longitude = 90.381631; */
 
 /*
 // Bermuda Center (Water)
 var latitude = 24.886,
    longitude = -70.268; */

  function initialize(lat, lng) {
    var locationLatLng = {
        lat: lat,
        lng: lng
      },
      mapCanvas = document.getElementById('map'),
      mapOptions = {
        center: locationLatLng,
        zoom: 15, //ideal 12
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.LEFT_BOTTOM
        },
        //scrollwheel: false,
        streetViewControl: false,
      };

    map = new google.maps.Map(mapCanvas, mapOptions);

    // Define the LatLng coordinates for the polygon's  outer path.
    var outerCoords = [{
        lat: 23.900516,
        lng: 90.337469
      }, {
        lat: 23.905621,
        lng: 90.343205
      }, {
        lat: 23.898037,
        lng: 90.342983
      }

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.875007, lng: 90.370270},
      {lat: 23.880893, lng: 90.383404},
      {lat: 23.875634, lng: 90.380571}*/

      /*
      // Bermuda Triangle (Water)
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}*/
    ];

    // Define the LatLng coordinates for the polygon's inner path.
    // Note that the points forming the inner path are wound in the
    // opposite direction to those in the outer path, to form the hole.
    var innerCoords = [{
        lat: 23.899989,
        lng: 90.341664
      }, {
        lat: 23.900156,
        lng: 90.342533
      }, {
        lat: 23.898037,
        lng: 90.342983
      }

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.877067, lng: 90.377367},
      {lat: 23.878000, lng:...