/* 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); }
$(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); });
<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"> <div class="panel-heading">name panel</div> <div class="panel-body"> ClassName : overMap-centerLeft </div> </div> <div class="panel panel-default overMap overMap-centerRight"> <div class="panel-heading">name panel</div> <div class="panel-body"> ClassName : overMap-centerRight </div> </div> </body>