JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="deletemeplease">
<div class="closemap">close map</div>
<div class="usMapSanDiego openMap">san diego</div>
<div class="usMapNorfolk openMap">norfolk</div>
<div class="usMapCharleston openMap">charleston</div>
<div class="usMapCrystalCity openMap">crystal city</div>
</div>
<div class="mapouter">
  <div class="gmap_canvas"><iframe width="1000" height="1000" id="gmap_canvas" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
  </div>
</div>

CSS

.mapouter.active {
    transform: scale(1) translate(50vw, 50vh);
    transform-origin: 50vw 50vh;
    margin-top: -250px;
    margin-left: -250px;
    opacity: 1;
    transition-delay: 1.5s;
}

.mapouter {
    position: absolute;
    text-align: right;
    height: 500px;
    width: 500px;
    overflow: hidden;
    border-radius: 250px;
    border: 3px solid #a53131;
    box-shadow: 0px 0px 0px 10px white;
    transition: 0.4s;
    transform-origin: 50vw 50vh;
    transform: scale(0.1) translate(50vw, 50vh);
    margin: 0;
    opacity: 0;
    transition-delay: 0s;
}

.gmap_canvas {
  overflow: hidden;
  background: none !important;
  height: 1000px;
  width: 1000px;
  transform: translate(-250px, -250px);
}
.deletemeplease {
  position: absolute;
}

JavaScript

var nofolkAddress = "https://maps.google.com/maps?q=5800%20Lake%20Wright%20Drive&t=&z=13&ie=UTF8&iwloc=&output=embed";
var sandiegoAddress = "https://maps.google.com/maps?q=1011%20Camino%20Del%20Rio%20South&t=&z=13&ie=UTF8&iwloc=&output=embed";
var charlestonAddress = "https://maps.google.com/maps?q=3955%20Faber%20Place%20Drive%2C%20N.%20Charleston%2C%20SC%2029405&t=&z=13&ie=UTF8&iwloc=&output=embed";
var crystalcityAddress = "https://maps.google.com/maps?q=2231%20Crystal%20Drive%20Arlington%2C%20VA%2022202&t=&z=13&ie=UTF8&iwloc=&output=embed";

$('.closemap').click(function() {
  $('.mapouter').removeClass("active");
});

$('.openMap').click(function() {
  $('.mapouter').addClass("active");
});
$('.usMapSanDiego').click(function() {
  $('#gmap_canvas').attr('src', sandiegoAddress);
});
$('.usMapNorfolk').click(function() {
  $('#gmap_canvas').attr('src', nofolkAddress);
});
$('.usMapCharleston').click(function() {
  $('#gmap_canvas').attr('src', charlestonAddress);
});
$('.usMapCrystalCity').click(function() {
  $('#gmap_canvas').attr('src', crystalcityAddress);
});