JSFiddle - React, Tailwind, and code Playground

by gyaresu

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="map" class="page-map" data-fullscreen="true" data-title="Oslo Gigs Event Map ">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <div data-role="content" id="map">
            <div id="map-canvas">
                <!-- style added to #content & #map-canvas divs to fix map -->
            </div><!-- /map-canvas -->
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#map" class="ui-btn-active ui-state-persist">Map</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div><!-- /page -->

    <div data-role="page" id="home" data-fullscreen="true" data-title="Home">
        <div data-role="content"><!-- content -->
            <ul id="listview" data-role="listview" data-filter="true" data-inset="true" data-filter-placeholder="Start typing here to search...">
            </ul>
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed" data-id="tabs" >
            <div data-role="navbar">
            <ul>
                <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li>
                <li><a href="#map">Map</a></li>
            </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div><!-- /page --> 
</body>
</html>

CSS

.page-map, #map, #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
    });
});