JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d37355.33098413549!2d46.06752278042879!3d51.51173721948219!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1568591949138!5m2!1sru!2sru" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<div id="block">
мост
</div>

CSS

#block  {
  width: 100px;
  position: absolute;
  background-color: white;
  border: 2px solid #5050a0;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
}

JavaScript

window.onload = () => {
	const map = document.querySelector("#map")
	let x = map.offsetLeft;
  let y = map.offsetTop;
  let w = map.offsetWidth;
  let h = map.offsetHeight;
  x += w/2 - 50;
  y += h/2;
  document.querySelector("#block").style=`left:${x}px;top:${y}px`
}