JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Map of events</title>
<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"/>

</head>
<body>
    <div data-role="page" id="mobile" class="page-map" data-fullscreen="true" data-title="Oslo Gigs Event Map ">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
        <div data-role="content" id="map-canvas" role="main">
            
        </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; }

#map-canvas img {
    max-width: none;
}

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
});
});