Эффект ввода не появляется после нажатия кнопки «да», и временной интервал также не работает

Question

Я пытаюсь создать страницу, используя css и html, которая должна выполнять следующие пункты:

1. Загрузить страницу с фоновым изображением.- Работает, но не получает адаптивного эффекта.

2. При нажатии кнопки «да» сообщение должно отображаться через 2 секунды, как это происходит для первых нескольких сообщений, ноэтого не происходит: |

3. Наконец, карта Google не отображается, даже если у меня есть api_key.

Впервые я начал работатьна CSS и HTML.Пожалуйста, предложите или помогите мне, если я могу что-то оптимизировать здесь.Любая помощь будет принята с благодарностью.Заранее спасибо!

var k = 0;
var txt_yes = "I know it feels so right...!!!";
var txt_yes_left = "Here is the map...!!!";
var txt_no = "oops thats bad...!!!";
var speed = 50;

function typeWriter(elem) {
  if (elem.id == "yes") {
    for (; k < txt_yes.length; k++) {
      document.getElementById("demo").innerHTML += txt_yes.charAt(k);
      setTimeout(typeWriter, speed);
    }

    for (j = 0; j < txt_yes_left.length; j++) {
      document.getElementById("demo1").innerHTML += txt_yes_left.charAt(j);
      setTimeout(typeWriter, speed);
    }
  } else if (elem.id == "no") {
    for (; k < txt_no.length; k++) {
      document.getElementById("demo").innerHTML += txt_no.charAt(k);
      setTimeout(typeWriter(this), speed);
    }
  }
  document.getElementById('disappear').innerHTML = "";
}

function myMap() {
  var myCenter = new google.maps.LatLng(23.5595, 87.2972);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: myCenter,
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter
  });
  marker.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: "Hotel Annexe"
  });
  infowindow.open(map, marker);
}

.container {
  position: relative;
  color: black;
}

.common {
  position: absolute;
  background-color: salmon;
  left: 100px;
  font-weight: bold;
  border-radius: 25px;
  border: 1px solid #888;
  visibility: hidden;
}

.common-onClick {
  position: absolute;
  background-color: mediumspringgreen;
  left: 300px;
  font-weight: bold;
  border-radius: 25px;
  border: 1px solid #888;
  visibility: hidden;
}

.bg-text1 {
  transform: translate( 3px, 30px);
  animation: cssAnimation 0s 1s forwards;
}

.bg-text2 {
  transform: translate( 3px, 90px);
  animation: cssAnimation 0s 2s forwards;
}

.image1 {
  position: absolute;
  left: 100px;
  border-radius: 35px;
  height: 400px;
  width: 300px;
  transform: translate( 3px, 160px);
  visibility: hidden;
  animation: cssAnimation 0s 2s forwards;
}

.bg-text3 {
  transform: translate( 3px, 580px);
  animation: cssAnimation 0s 3s forwards;
}

.bg-button {
  position: absolute;
  background-color: aqua;
  border-radius: 25px;
  border: 1px solid #888;
  padding: 10px 100px;
  left: 100px;
  font-weight: bold;
  transform: translate( 3px, 650px);
  visibility: hidden;
  animation: cssAnimation 0s 4s forwards;
}

.bg-button1 {
  position: absolute;
  background-color: aqua;
  border-radius: 25px;
  border: 1px solid #888;
  padding: 10px 100px;
  left: 100px;
  font-weight: bold;
  transform: translate( 3px, 700px);
  visibility: hidden;
  animation: cssAnimation 0s 4s forwards;
}

.onClick-msg {
  transform: translate( 3px, 650px);
  animation: cssAnimation 0s 0s forwards;
}

.onClick-msg1 {
  transform: translate( 3px, 700px);
  animation: cssAnimation 0s 1s forwards;
}

.bg-text4 {
  transform: translate( 3px, 60px);
  animation: cssAnimation 0s s forwards;
}

#js-contact-message:after {
  content: '\1f603';
  color: black;
  / yellow: not enough contrast with white background /
}

.responsive {
  padding: 0px;
  background-repeat: no-repeat;
  float: left;
  position: relative;
  min-height: 1px;
  display: block;
  width: 60%;
  height: 80%;
  / Add the blur effect / filter: blur(10px);
  -webkit-filter: blur(10px);
}

.responsive1 {
  width: 100%;
  height: 100%;
}

@keyframes cssAnimation {
  to {
    visibility: visible;
  }
}

<img src="bride.jpg" alt="" class="responsive">
<div class="container">
  <div class="common bg-text1">
    <p id="js-contact-message">Hey..</p>
  </div>
  <div class="common bg-text2">
    <p>This is xyz.</p>
  </div>
  <div class="image1">
    <img src="bride.jpg" alt="" class="responsive1">
  </div>
  <div class="common bg-text3">
    <p>Its working till here.</p>
  </div>
  <div id="disappear">
    <button id="yes" class="bg-button" onclick="typeWriter(this)">Yes</button>
    <button id="no" class="bg-button1" onclick="typeWriter(this)">No</button>
  </div>
  <div id="demo" class="common-onClick onClick-msg">
    <p></p>
  </div>
  <div id="demo1" class="common onClick-msg1">
    <p></p>
  </div>
  <div id="map" style="width:100%;height:90%"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=myMap"></script>