JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<div id="kanvas"></div>

CSS

#kanvas { width: 200px; height: 200px; }

JavaScript

var mapsLoaded = false;
window.mapsCallback = function(){
    mapsLoaded = true;
    setInterval(function(){
    	$(window).trigger('mapsLoaded');
    }, 5000);
}
window.loadMaps = function(){
    if(mapsLoaded) return window.mapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=mapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){
    function initialize(){
        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(47.3239, 5.0428),
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        map = new google.maps.Map(document.getElementById('kanvas'),mapOptions);
    }
    $(window).bind('mapsLoaded', initialize);
    window.loadMaps();
});