JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>

<button id="show-map">Show Map</button>

<div id="map-canvas"></div>

CSS

#map-canvas {
  height: 30em;
  width: 30em;
  background-image: url('https://picsum.photos/600/600?random=1');
}

JavaScript

var showMap = $('#show-map');

function initialize() {
    var mapOptions = {
	    center: { lat: 0, lng: 0 },
	    zoom: 8
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

$(document).ready(function(){
    $('#show-map').on('click',initialize)
});