InfoWindow JavaScript

HTML

<!DOCTYPE html>
<html>
<head>
    <title>test</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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
        <div data-role="page" id="mobile" class="page-map" data-theme="b" data-fullscreen="true"> 
            <div data-role="content" id="map">
                <div  id="map-canvas">
                </div>
            </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>
                    </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: auto;}

JavaScript

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

$('.page-map').live("pageshow", function() {
    
    $.getJSON("http://oslogigs.com/rest/Pub", function(data) {

        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',
                mapTypeControlOptions: { 
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                mapTypeId: google.maps.MapTypeId.HYBRID
        }); 
        var bubble = new google.maps.InfoWindow();
        var pubs = data.list.Pub;
 
        $.each(pubs, function(i, pub) {

            var beer;
            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: "http://oslogigs.com/static/images/" + pub.beer_price + ".png",
                shadow: 'http://oslogigs.com/static/images/shadow.png',
                position: posi,
                title: pub.pub_name
            });

            if (pub.beer_price == 99) {
                marker.setZIndex(1);
            } else {
                marker.setZIndex(100);
            }

            google.maps.event.addListener(marker, 'click', function() {
                // http://mapki.com/wiki/Google_Map_Parameters
                    if (pub.beer_price == 99) {
                        beer = '?';
                    } else {
                        beer = pub.beer_price; 
                    }

                tweet = '<a...