JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map">
  <img src="img/map.jpg" alt="map"   width="300" height="150">
  <iframe   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.599104370522!2d30.320889250518306!3d59.938794181787266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca5ba729%3A0xea9c53d4493c879f!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LCDQodCw0L3QutGCLdCf0LXRgtC10YDQsdGD0YDQsywg0KDQvtGB0YHQuNGPLCAxOTExODY!5e0!3m2!1sru!2skz!4v1518337003178" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSS

.map {
  position: relative;
}

.map iframe {
  position: absolute;
  top: 0;
  left:0;
  width: 300px;
  height: 150px;
}

.map .map-popup-show {
  position: absolute;
  top: -150px;
  left: -640px;
  width: 940px;
  height: 446px;
  box-shadow: 0 0 16px 1px rgba(35,31,32,.5);
}

JavaScript

var map = document.querySelector(".map iframe");

map.addEventListener("click", function (event) {
event.preventDefault("");
map.classList.add("map-popup-show");
});