jQuery Mobile Map

Using google maps API

by Alex Azuero

HTML

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

<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 = "39.061, -77.121",
        poimg = "http://www.findthebestcarprice.com/public/images/how-to-buy-a-car.png";

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

    var pos, marker, content, infowindow;

    infowindow = new google.maps.InfoWindow();


    pos = new google.maps.LatLng(39.061, -77.121);
    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));

});