JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Map of events</title>
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body>
    <div data-role="page" id="mobile" class="page-map" data-fullscreen="true" data-title="Oslo Gigs Event Map "> 

        <div data-role="content">
            <div id="map-canvas">
                <!-- map loads here -->
            </div><!-- /map-canvas -->
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/mobile" class="ui-btn-active ui-state-persist">Map</a></li>
                    <li><a href="/venues">Find</a></li>
                    <li><a href="/post">Post</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

CSS

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }

JavaScript

+$('.page-map').live("pageinit", function() {
var bubble = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(59.920, 10.750);  
var map = new google.maps.Map(document.getElementById("map-canvas"), {
        // zoom is good on iphone @ 13 but better on desktop @ 14
        zoom: 12,
        center: latlng,
        backgroundColor: 'grey',
        //disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
}); 

    var pub = {"list": {"@offset": "", "Pub": [{"pub_phone": "+47 22 33 70 05", "pub_bounce": "false", "pub_name": "Dubliner Folk Pub", "pub_address": "R\u00e5dhusgata 28, 0151 Oslo, Norway", "pub_lat": "59.9098424", "key": "test1", "pub_long": "10.7406347", "beer_price": "73"}, {"pub_phone": "+47 23 21 20 00", "pub_bounce": "false", "pub_name": "Grand Caf\u00e9", "pub_address": "Karl Johans Gate 31, 0159 Oslo, Norway", "pub_lat": "59.9138745", "key": "test1", "pub_long": "10.7390679", "beer_price": "46"}, {"pub_phone": "+47 22 20 22 32", "pub_bounce": "true", "pub_name": "Revolver", "pub_address": "M\u00e5llergata 32, 0179 Oslo, Norway", "pub_lat": "59.916222", "key": "test2", "pub_long": "10.7473925", "beer_price": "67"}]}};
    
    $.getJSON(pub, function(data) {
        var pubs = pub;

        $.each(pubs, function(i, pub) {
            alert(i + ' ' + pub);
            var posi = new google.maps.LatLng(pub.pub_lat, pub.pub_long);
            var marker = new google.maps.Marker({
                animation: (pub.pub_bounce =='true') ? google.maps.Animation.BOUNCE : null,
                map: map,
                icon: "http://oslogigs-dev.com/static/images/" + pub.beer_price + ".png",
                shadow: 'http://oslogigs-dev.com/static/images/shadow.png',
                position: posi,
                title: pub.pub_name
            });

            map.panTo(latlng);

            google.maps.event.addListener(marker, 'click', function() {
                content_string = '<h1>'+  pub.pub_name + '</h1>'+
             ...