JSFiddle - React, Tailwind, and code Playground

by Suvi Vignarajah

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<script src="http://www.msg360.co.uk/emails/sample/Scripts/infobubble-compiled.js"></script>
<div id="map_canvas" style="width:600px; height:400px"></div>

JavaScript

var map;
init();
 
        function init() {

            //Setup the map
            var googleMapOptions = {
                center: new google.maps.LatLng(53.5267, -1.13330),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //Start the map
            map = new google.maps.Map(document.getElementById("map_canvas"),
            googleMapOptions);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(53.5267, -1.13330),
            });

            marker.setMap(map);
            
            //giving the longitudunal coordinate of the infoBubble based on current zoom level
            var newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));
            
            infoBubble = new InfoBubble({
                content: '<div class="example">Some label</div>',
                position: new google.maps.LatLng(53.5267, newlong),
                shadowStyle: 1,
                padding: 10,
                borderRadius: 5,
                minWidth: 200,
                arrowSize: 0,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: true,
                hideCloseButton: false,
                arrowPosition:7,
                backgroundClassName: 'example',
                arrowStyle: 2
            });
            
            infoBubble.open(map);
        //position infoBubble for each zoom level change, based on arithmetic logic (notice the power of 2)
         google.maps.event.addListener(map, "zoom_changed", function() {
            newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));
            infoBubble.setPosition(new google.maps.LatLng(marker.getPosition().lat(), newlong));                
        });

        }

//Both position and pixeloffset do not have any effect on the infoBubble. They are both shown to show my syntax (perhaps...