JSFiddle - React, Tailwind, and code Playground

by John Wick

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body>
    <button class="btn-open">Open...</button>
    <button class="btn-open-please">Open, please!</button>
  <div id="map_canvas" style="position:absolute; display:block; top:40px; bottom:0; left:0; right:0;"></div>
</body>
</html>

JavaScript

//the solution of http://stackoverflow.com/questions/7950030/can-i-remove-just-the-popup-bubbles-of-pois-in-google-maps-api-v3/11929651

function fixInfoWindow() {
    var proto = google.maps.InfoWindow.prototype,
        open = proto.open;
    proto.open = function(map, anchor, please) {
        console.log(arguments);
        if (please) {
            return open.apply(this, arguments);
        }
    }
}


//------------------------------------------
//our application:

function helloWorld() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var popup = new google.maps.InfoWindow({
        content: 'Okay...'
    });
    popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

    $('.btn-open').click(function() {
        //here is how Google opens InfoWindow for POI
        popup.open(map, null);
    });

    $('.btn-open-please').click(function() {
        //here is how we should do that
        popup.open(map, null, true);
    });


}




//applying our hack
fixInfoWindow();

//running map application
helloWorld();