JSFiddle - React, Tailwind, and code Playground

by miecz kwo

HTML

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

CSS

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

JavaScript

var gMapsLoaded = false;
window.gMapsCallback = function(){
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function(){
    if(gMapsLoaded) return window.gMapsCallback();
    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=gMapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){
   
    function initialize(){
        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(51.405, 16.167),
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
        var markerOptions = {
		map: map,
		position: new google.maps.LatLng(51.405386, 16.167345)
	};//markerOptions
	marker2 = new google.maps.Marker(markerOptions);
      google.maps.event.addListener(marker2, "click", function()
	{
		// Make an AJAX request to get the data
		// The return will be put into the InfoWindow
		jQuery.ajax({
  			url: 'http://lubin.kwoczka.pl/ajax/get_infowindow_content.php',
  			success: function(data) {
    				iw2.setContent(data);
				iw2.open(map, marker2);
  			}
		});
	});  
    }//initialize

    $(window).bind('gMapsLoaded', initialize);
    window.loadGoogleMaps();
});