jQuery Mobile Map, using jquery.ui.map plugin

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>

<div id="map" data-role="page">
    <div data-role="header">
        <h1>Test</h1>
    </div>
    <div data-role="content">
        <div id="map_canvas" style="height:300px; width:100%"></div>
    </div>
</div>

JavaScript

$(function() {
    var poi = "33.89342,-84.30715",
        poimg = "http://www.findthebestcarprice.com/public/images/how-to-buy-a-car.png";
    $('#map_canvas').gmap({
        'zoom': 7
    }).bind('init', function(event, map) {
        $('#map_canvas').gmap('addMarker', {
            'position': poi,
            'bounds': true
        }).click(function() {
            content = '<img src="' + poimg + '" style="float:left;margin-right:5px"><div>Title<div style="font-weight:normal;font-size:x-small">Text details</div></div>';
            $('#map_canvas').gmap('openInfoWindow', {
                'content': content
            }, this);
        });
    });
});