JSFiddle - React, Tailwind, and code Playground

by elamigosam

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>lightbox.js Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://www.cssscript.com/demo/fullscreen-image-lightbox-slider-lightbox-js/lightbox.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="container">
      <h1 style="margin:30px auto; text-align:center;">lightbox.js Example</h1>
      <p>
        The map works and loads ok, but after you click on the image to make it full screen and then close the full screen, the map stops responding, it freezes.
      </p>
      <div class="row">
        <div data-big="https://unsplash.it/1800/1200?image=639" class="col lightbox">
          <img src="https://unsplash.it/300/200?image=639" alt="small" class="img-responsive">
        </div>
        <div data-big="https://unsplash.it/1800/1200?image=939" class="col lightbox">
          <img src="https://unsplash.it/300/200?image=939" alt="small" class="img-responsive">
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col">
          <h3 class="text-center">Map</h3>
          <p>This map works as normal, untill you click on the image and then exit the slider, then the map fails.</p>
          <p>What do I need to do to make the map work after one clicks on the image and exits the slider? </p>
          <div id="map" style="height:500px; width:100%"></div>
        </div>
      </div>
    </div>
    <script src="https://www.cssscript.com/demo/fullscreen-image-lightbox-slider-lightbox-js/lightbox.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var init = new lightBox();
      });

    </script>
    <script>
      function buildMap() {
        var listing = {
          lat: 7,
          lng: 7
        };
        var map = new google.maps.Map(
          document.getElementById('map'), {
            zoom: 16,
...