JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://www.msg360.co.uk/emails/sample/Scripts/infobubble-compiled.js"></script>
<div id="map_canvas" style="width:920px; height:370px"></div>
JavaScript
init();
function init() {
//Setup the map
var googleMapOptions = {
center: new google.maps.LatLng(53.5167, -1.1333),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Start the map
var map = new google.maps.Map(document.getElementById("map_canvas"),
googleMapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(53.5267, -1.1333),
});
marker.setMap(map);
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 7,
backgroundClassName: 'example',
arrowStyle: 2
});
infoBubble.open(map, marker);
}
//Both position and pixeloffset do not have any effect on the infoBubble. They are both shown to show my syntax (perhaps that is wrong?)