JSFiddle - React, Tailwind, and code Playground

by gyaresu

HTML

<!DOCTYPE html>
<html>
<head>
    <title>{{ city }} Gigs - Map of events</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="static/css/add2home.css">
    <script type="application/javascript" src="static/js/add2home.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <link rel="stylesheet" href="static/css/map.css" />
    <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
    <link rel="apple-touch-icon" href="/static/images/{{ city }}Gigs.png" />
    <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>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script src="static/js/listview.js"></script>
    <script src="static/js/map.js"></script>
    <script src="static/js/pubform.js"></script>

    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-3008241-19']);
    _gaq.push(['_setDomainName', 'oslogigs.com']);
    _gaq.push(['_trackPageview']);
        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

    </head>
    <body>
        <div data-role="page" id="mobile" class="page-map" data-theme="b" data-fullscreen="true" data-title="{{ city }} Gigs Event Map "> 
   ...

CSS

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

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

JavaScript

// live('pageshow') rather than pageinit keeps the map from moving to the 
// top left corner of the screen.

$('.page-map').live("pageshow", 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: 'black',
        //disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
}); 

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log(position.coords.latitude, position.coords.longitude);
        var posi = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var marker = new google.maps.Marker({
            map: map,
            icon: "/static/images/10.png",
            position: posi,
            title: "You are here!"
        });
        bubble.open(map, marker);
        console.log("We got this far.");

        });
} else {
    console.log("Dun werk :(");
}

    $.getJSON("/rest/Pub", function(data) {
        var pubs = data.list.Pub;
        var beer;

        $.each(pubs, function(i, pub) {

            var pubaddress = encodeURI(pub.pub_address);
            var pubname = encodeURI(pub.pub_name);
            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: "/static/images/" + pub.beer_price + ".png",
                shadow: 'static/images/shadow.png',
                position: posi,
                title: pub.pub_name
            });

            google.maps.event.addListener(marker, 'click', function() {
                // http://mapki.com/wiki/Google_Map_Parameters
                    if...