JSFiddle - React, Tailwind, and code Playground

by Suvi Vignarajah

HTML

<head>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
</head>
<body>
    <div id="map_canvas"></div>
</body>

CSS

#map_canvas {
    width: 480px;
    height: 320px
}
#title {
    font-size: 14px;
    padding-bottom: 10px;
}
#info {
    font-size: 12px;
}

JavaScript

$(function () {
    demoMap = {
        initMap: function () {
            var myLatlng = new google.maps.LatLng(41.097905, -73.405006);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            this.addMarker();
        },

        addMarker: function () {
            var self = this;
            var contentString = "<div id='content'>";
            contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
            contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";

            var latlng = this.map.getCenter();

            var marker = new google.maps.Marker({
                position: latlng,
                map: this.map,
                title: "Mr. Frosty's Deli and Grill"
            });

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                disableAutoPan: true               
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)});
                infowindow.open(self.map, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {                
                infowindow.close();
            });
        },

        getInfowindowOffset: function (map, marker) {
            var center = this.getPixelFromLatLng(map.getCenter()),
                point = this.getPixelFromLatLng(marker.getPosition()),
                quadrant = "",
                offset;
            quadrant += (point.y > center.y) ? "b" : "t";
            quadrant += (point.x < center.x) ? "l" : "r";          ...