JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="wrapper">
  <div id="googleMap" style="width:500px;height:380px;"></div>

  <div id="over_map">
    <div id="close"> &times; </div>
  </div>
</div>

CSS

#over_map {
   position: absolute;
   height: 200px;
   width: 200px;
   top: 10px;
   left: 50%;
   z-index: 99;
   background-color: white;
   display: none;
   opacity: .8;
 }
 
 #wrapper {
   position: relative;
 }
 
 #close {
   float: right;
   margin: 10px;
   cursor: pointer;
   text-size: 15px;
 }

JavaScript

function initialize() {
var myCenter=new google.maps.LatLng(15, 75.0);
  var mapProp = {
    center: myCenter,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  
var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });

marker.setMap(map);

google.maps.event.addListener(marker,'click',function() {
   $("#over_map").slideDown('slow');
   $("#googleMap").css("opacity", ".5");
  });
}
google.maps.event.addDomListener(window, 'load', initialize);


$(document).ready(function() {
  

  $("#close").click(function() {
    $("#over_map").slideUp('slow', function(){
     $("#googleMap").css("opacity", "1");
    });
    
  });
});