JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
        <script type="text/javascript">
            function initialize() {

                var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

                var myMapOptions = {
                    zoom: 15,
                    center: secheltLoc,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


                var labelText = "Wellington";
                var boxText = document.createElement("div");
                boxText.innerHTML = labelText;


                var myOptions = {
                    content: boxText,
                    boxClass: 'gavin',
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(10, 6),
                    position: secheltLoc,
                    closeBoxURL: "",
                    closeBoxMargin: 0,
                    pane: "floatPane",
                    enableEventPropagation: true,
                    alignBottom: true,
                    maxWidth: 100,
                    infoBoxClearance: 0
                };

                var ibLabel = new InfoBox(myOptions);
                ibLabel.open(map);

                google.maps.event.addListener(ibLabel, "domready", function(e) {
                    $('.gavin').on('click', function(){
                    ib.open(map, marker);                        
})
                });




                var marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    position: new google.maps.LatLng(49.47216, -123.76307),
                   ...

CSS

.gavin {
     font-family: Verdana;
     font-size: 30px;
 }