JSFiddle - React, Tailwind, and code Playground

by SaulBurgos

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3.13&amp;amp;libraries=geometry,places&amp;amp;sensor=false"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>
  <div id="map">      
  </div>
    
    <div class="panel panel-default overMap overMap-topCenter">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
            ClassName : overMap-topCenter
        </div>
    </div>
    
    <div class="panel panel-default overMap overMap-topLeft">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
             ClassName : overMap-topLeft
        </div>
    </div>
    
    <div class="panel panel-default overMap overMap-topRight">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
            ClassName : overMap-topRight
        </div>
    </div>
    
     <div class="panel panel-default overMap overMap-bottomCenter">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
            ClassName : overMap-bottomCenter
        </div>
    </div>
    
     <div class="panel panel-default overMap overMap-bottomRight">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
           ClassName : overMap-bottomRight
        </div>
    </div>
    
    <div class="panel panel-default overMap overMap-bottomLeft">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
            ClassName : overMap-bottomLeft
        </div>
    </div>
    
    <div class="panel panel-default overMap overMap-centerAll">
        <div class="panel-heading">name panel</div>
        <div class="panel-body">
             ClassName : overMap-centerAll
        </div>
    </div>
    
     <div class="panel panel-default overMap overMap-centerLeft">
   ...

CSS

/* start code to full map*/
html { 
  height: 100% 
}

body { 
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}

 #map {
    width: 100%; 
    height: 100%;
  }
/* end code full map*/
/* start code to position element over map*/
.overMap {
  position: absolute;
  z-index: 100;
}

.overMap-topCenter {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-topLeft {
  top: 0;
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-topRight {
  top: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-bottomCenter {
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-bottomRight {
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-bottomLeft {
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
}

.overMap-centerAll {
    top: 0;
  bottom: 0;
  left: 0;
  right:0;
  margin: auto;
}

.overMap-centerLeft {
    top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.overMap-centerRight {
    top: 0;
  bottom: 0;
  right:0;
  margin: auto;
}

/* end code to position element over map*/

/*custom width to control only the width and heigth nothing important*/
.panel {
    width:200px;
    height:100px;  
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.61);
}

JavaScript

$(document).ready(function() {
    
    var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
        draggable : false
        };
   var map = new google.maps.Map(document.getElementById("map"),  mapOptions);
    
});