JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }
</script>

      <div id="mapc"></div>

      <button id="btn">load map</button>

        <script async defer
          src="https://maps.googleapis.com/maps/api/js?callback=initMap">
        </script>

CSS

html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%;     width: 500px;
    height: 500px; }

JavaScript

$(document).ready(function(){
       $("#btn").click(function(){
        $("#mapc").append('<div id="map"></div>');
        initMap();
        });
     });