JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<div id="map_canvas"></div>
<div id="debug"></div>

CSS

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

JavaScript

(function(){
    var map;
    loadGoogleMaps();
    function prepGoogleMaps(){
        if(typeof google != 'undefined'){
            $('#debug').append('Loaded<br>');
            initialize();
        }else{
            $('#debug').append('Not loaded<br>');
            setTimeout(prepGoogleMaps,1000);
        }
    }
    
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    
    function loadGoogleMaps(){
        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");

        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    prepGoogleMaps();
                }
            };
        } else { // Other browsers
            script_tag.onload = prepGoogleMaps;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    
})();