JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/Carrooi/Js-GoogleMapsLoader/blob/develop/lib/Google.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script async defer type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<p class="init">
Инициализируй меня
</p>
<div id="map" class="map"></div>
CSS
.map {
width: 100%;
height: 400px;
}
JavaScript
$(".init").click(function(event) {
initMap();
})
function initMap() {
//GoogleMapsLoader.KEY = 'AIzaSyBQDIszjCSHu1-bHvvKKfoX_Fce0PmMn6A';
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 14
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(33.818038, -117.928492),
map: map
});
}