JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://www.chronopost.pt/sites/all/libraries/RedePickme/markerclusterer/markerclusterer_compiled.js"></script>
<form id="getPoints" method="get" action="">
        <label id="postal-code-label" for="postal-code">Pesquisar por um código postal <span>(p.ex. 1000)</span>:</label>
        <input id="postal-code" name="postal-code" value="1" type="text" maxlength="4" class="numeric">
        <input id="postal-code-btn" name="postal-code-btn" value="&gt;" type="submit">
    </form>
<div id="chronomap" style="width: 800px; height: 400px"></div>
    <div id="point-infoWindowTpl">
    <div class="infoWindow">
        <h2 class="point-name"></h2>
        <p><span class="title">Referência: </span><span class="point-reference"></span></p>
        <p><span class="title">Morada:</span> <span class="point-address"></span></p>
        <p style="padding-left: 40px"><span class="point-address2"></span></p>
        <p><span class="title">Telefone:</span> <span class="point-phone"></span></p>
        <!--  <p><span class="title">Email:</span> <span class="point-email"></span></p> -->
        <div class="point-open-hours-table">
            <table>
                <thead>
                    <tr>
                        <th>Horário</th>
                        <th>2ª</th>
                        <th>3ª</th>
                        <th>4ª</th>
                        <th>5ª</th>
                        <th>6ª</th>
                        <th class="sat">Sa</th>
                        <th class="sun">Do</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Abertura de manhã</td>
                        <td class="morning_open2"></td>
                        <td class="morning_open3"></td>
                        <td class="morning_open4"></td>
                        <td class="morning_open5"></td>
                 ...

CSS

*{
    font-size: inherit;
    }
    body {
font-family: "Trebuchet MS","Lucida Sans Unicode",Arial;
font-size: 0.75em;
color: #636363;
}
thead th {
text-align: left;
padding-right: 1em;
border-bottom: 3px solid #CCC;
}
    #map_canvas{height:400px;width:394px;}
    #point-infoWindowTpl{display:none;}
    div .infoWindow{font-size:.8em;}
    .infoWindow h2{color:#005AAB;}
    div .infoWindow p{margin:2px 0 0 0;}
    div .infoWindow p span.title{font-weight:bold;}
    div .point-open-hours-table{display:none;}
    div .infoWindow table{margin-top:5px;}
    div .infoWindow td{font-size:.95em;padding:2px;}

JavaScript

function ucwords(str) {
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function(one) {
        return one.toUpperCase();
    });
}

function strtolower(str) {
    return (str + '').toLowerCase();
}
var RedePickme = {
    init: function() {

        RedePickme.postalCode = $("#postal-code");

        //$(".numeric").numeric();
        //if a query was made, move to the hash position
        if (location.search.length > 0) {
            location.hash = 'content-header';
        }

        $('#getPoints').submit(function() {
            //since this is a ajax operation, the query string will not be
            //inserted on the url. This code will do that
            if (RedePickme.postalCode.val().length > 0) {
                location.search = '?postal-code=' + $('#postal-code').val();
            }

            RedePickme.Map.loadPointsService(RedePickme.postalCode.val());

            return false;
        });
    }
};

RedePickme.pickUpPoint = function() {

};

RedePickme.Map = {

    map: null,
    markerClusterer: null,

    init: function() {
        var self = RedePickme.Map;
        self.initMap();
        self.initMarkerClusterer();
    },

    initMap: function() {
        var self = RedePickme.Map;

        // opções do google maps
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        self.map = new google.maps.Map(document.getElementById("chronomap"), myOptions);


    },

    initMarkerClusterer: function() {
        var self = RedePickme.Map;

        var mcOptions = {
            gridSize: 40,
            maxZoom: 15
        };

        self.markerClusterer = new MarkerClusterer(self.map, null, mcOptions);
    },

    addMapMarkers: function(list) {
        var self = RedePickme.Map;

        $.each(list, function(i, obj) {
            var marker = self.createMarker(obj);
            self.addMarker(marker);
        });
        //        $.each(self.markerClusterer.getMarkers(), function(i,...