单击“是”按钮后，键入效果未显示，并且时间间隔也不起作用

Question

我正在尝试使用css和html创建一个页面，该页面应该执行以下各项：

1. 使用背景图像加载页面。 -它有效，但未获得响应效果。

2. 在单击“是”按钮后，该消息应该在间隔2秒钟后显示，因为前几条消息发生了该消息，但那没有发生。 ：|

3. 即使我有api_key，最后Google地图也没有显示。

这是我第一次开始使用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>