JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="mapholder">
  <div id="map"></div>
</div>

CSS

html, body, #mapholder, #map{
    height:100%
} 
#mapholder img {
    max-width: none !important;
  }
  #map img { max-width: none !important; }
  /* IE 6 does not support max-width so default to width 100% */
  .ie6 img {
      width:100%;
  }
  .gm-style img { max-width: none !important; }
  .gm-style label { width: auto !important; display: inline; }

JavaScript

var mapOptions = {
    center : new google.maps.LatLng(22.491629,83.901082),
    zoom : 6,
    minZoom : 6,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,
    zoomControlOptions : {
      position : google.maps.ControlPosition.RIGHT_CENTER
    },
    panControlOptions : {
      position : google.maps.ControlPosition.LEFT_TOP,
    },
    mapTypeId : google.maps.MapTypeId.TERRAIN,
    // styles : mapStyle,
  }

var mapElement = document.getElementById('map'); 
map = new google.maps.Map(mapElement, mapOptions);