JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<div class="wrapper">
<div id="map"></div>
<div class="content cont-A">AAA</div>
<div class="content cont-B">BBB</div>
</div>
CSS
#map {
height: 500px;
}
.wrapper{
position:relative;
}
.content{
position:absolute;
width:50px; height:50px;
background:#222;
color:#eee;
bottom:30px; right:30px;
}
.cont-A{ bottom:30px; right:30px; }
.cont-B{ bottom:30px; right:100px; }
JavaScript
jQuery(document).ready(function () {
var map;
var centerPosition = new google.maps.LatLng(45.74, 7.33);
var options = {
zoom: 22,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var marker = new google.maps.Marker({
position: centerPosition,
map: map,
});
});