JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<button class="btn-open">Open...</button>
<div id="map_canvas" style="position:absolute; display:block; top:40px; bottom:0; left:0; right:0;"></div>
CSS
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}
JavaScript
//the solution of http://stackoverflow.com/questions/7950030/can-i-remove-just-the-popup-bubbles-of-pois-in-google-maps-api-v3/11929651
//------------------------------------------
//Magic fix:
function fixInfoWindow() {
//Here we redefine set() method.
//If it is called for map option, we hide InfoWindow, if "noSuppress" option isnt true.
//As Google doesn't know about this option, its InfoWindows will not be opened.
var set = google.maps.InfoWindow.prototype.set;
google.maps.InfoWindow.prototype.set = function (key, val) {
if (key === 'map') {
if (!this.get('noSuppress')) {
console.log('This InfoWindow is suppressed. To enable it, set "noSuppress" option to true');
return;
}
}
set.apply(this, arguments);
}
}
//------------------------------------------
//our application:
function helloWorld() {
var latlng = new google.maps.LatLng(-34.398, 150.650);
var myOptions = {
zoom: 9,
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...',
noSuppress: true //<-- here we tell InfoWindow to bypass our blocker
});
popup.setPosition(new google.maps.LatLng(-34.397, 150.644));
$('.btn-open').click(function () {
popup.open(map);
});
}
//applying our hack
fixInfoWindow();
//running map application
helloWorld();