jQuery Mobile Map

Using google maps API

HTML

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.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-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
<div id="map" data-role="page">
    <div data-role="panel" id="menupanel" data-position="left" data-display="push">
        <!-- panel content goes here -->
        <nav>
            <ul id="menu" data-role="listview" data-inset="true">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </nav>
    </div>
    <div data-role="header"> <a href="#menupanel" data-icon="arrow-l" class="ui-btn-left">Menu</a>

         <h1>TestAAA</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";

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 21,
        center: new google.maps.LatLng(33.89342, -84.30715),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var pos, marker, content, infowindow;

    infowindow = new google.maps.InfoWindow();


    pos = new google.maps.LatLng(33.89342, -84.30715);
    marker = new google.maps.Marker({
        position: pos,
        map: map,
        animation: google.maps.Animation.DROP
    });

    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>';

    infowindow = new google.maps.InfoWindow({
        content: content
    });

    google.maps.event.addListener(marker, 'click', (function (marker) {
        return function () {
            infowindow.open(map, marker);
        };
    })(marker));

});