Google Maps Custom Info Windows - Have one open and then close the other once thats open etc

Question

I am struggling with this- Got a Google Map with some custom Info Windows. So on click on marker will change the information on the box on left hand side. Got the Default one displaying on load on page and needs to change when you click on the diffrent points on the map. I have France changing but you can not click on other items. Likewise with NY. Any Ideas where I am going wrong?

I have attached below my Code. Any help will be much appreciated.

Hope that helps.

function initialize() {

  var mapOptions = {
    center: {
      lat: 40.7499256,
      lng: -73.9854028
    },
    zoom: 3,
    zoomControl: false,
    panControl: false,
    streetViewControl: false
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var img = "https://i.stack.imgur.com/JWM0W.png";

  var NewYork = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    icon: img
  });

  var London = new google.maps.Marker({
    position: {
      lat: 51.5106122,
      lng: -0.1529072
    },
    map: map,
    icon: img
  });

  var Paris = new google.maps.Marker({
    position: {
      lat: 48.8588589,
      lng: 2.3470599
    },
    map: map,
    icon: img
  });

  var HongKong = new google.maps.Marker({
    position: {
      lat: 22.2753729,
      lng: 114.1757384
    },
    map: map,
    icon: img
  });

  var markers = {
    'NewYork': NewYork,
    'London': London,
    'Paris': Paris,
    'HongKong': HongKong
  };

  NewYork.addListener('click', changeContent);
  Paris.addListener('click', changeContentTwo);


  var styles = [{
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#d3d3d3"
      }]
    },
    {
      "featureType": "transit",
      "stylers": [{
          "color": "#808080"
        },
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#b3b3b3"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#ffffff"
        },
        {
          "weight": 1.8
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#d7d7d7"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#ebebeb"
        }
      ]
    },
    {
      "featureType": "administrative",
      "elementType": "geometry",
      "stylers": [{
        "color": "#a7a7a7"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "landscape",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#efefef"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#696969"
      }]
    },
    {
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#737373"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#d6d6d6"
      }]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {},
    {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#dadada"
      }]
    }
  ];

  map.setOptions({
    styles: styles
  });




  function changeContent() {
    $("#klk-map-content-1").fadeOut("fast", function() {
      $("#klk-map-content-2").fadeIn("slow");
    });
  }

  function changeContentTwo() {
    $("#klk-map-content-1").fadeOut("fast", function() {
      $("#klk-map-content-3").fadeIn("slow");
    });
  }

  // $(".activebox").fadeOut("fast", function(){
  //  $("#klk-map-content-1").fadeIn("slow");
  //  $("#klk-map-content-2").fadeIn("slow");
  //  $("#klk-map-content-3").fadeIn("slow");
  // });

  function getCoords(position) {
    var text = position.replace(/[()]/g, '').split(", ");
    var lat = Number(text[0]);
    var lng = Number(text[1]);

    return {
      lat: lat,
      lng: lng
    };
  }


}

google.maps.event.addDomListener(window, 'load', initialize);

* {
  box-sizing: border-box !important;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 85%;
  width: 100%;
}

#overlay {
  background-color: black;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

#active {
  background-color: #333;
  display: block;
  margin-bottom: -5px;
  height: 5px;
  width: 25.00%;
  position: relative;
  z-index: 999;
}

.nav {
  display: table;
  height: 15%;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav li {
  border-left: 1px solid #E5E5E5;
  color: #787878;
  cursor: pointer;
  display: table-cell;
  font-family: 'Sanchez', serif;
  text-align: center;
  vertical-align: middle;
  width: 25%;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.nav li:first-child {
  border-left: none;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- Link -->
  <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Sanchez">
</head>


<body>
  <!-- Content -->
  <div id="map-canvas" style="position: relative; overflow: hidden;"></div>


  <div id="overlay" class="activebox" style="display: block; position: absolute; z-index: 1000; background-color: white; top: 50px; left: 10px; height: auto; width: 300px; overflow: auto; border-top: 5px green solid; padding: 1rem;">
    <div class="klk-map-contents" id="klk-map-content-1">Content 1</div>
    <div class="klk-map-contents" id="klk-map-content-2" style="display: none;">Content 2</div>
    <div class="klk-map-contents" id="klk-map-content-3" style="display: none;">Content 3</div>
  </div>


  <!-- Script CDN -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>



  <!-- Script -->

</body>

</html>