JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas" style="width: 100%; height: 600px"></div>

JavaScript

//Google Map Advanced Features Test
function initialize() {
    var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
    var myMapOptions = {
        zoom: 15,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
    var marker = new google.maps.Marker({
        map: theMap,
        draggable: true,
        position: new google.maps.LatLng(49.47216, -123.76307),
        visible: true
    });
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
    var myOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "url('tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };
    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(theMap, this);
    });
    var ib = new InfoBox(myOptions);
    ib.open(theMap, marker);
}
    initialize();