jQuery mobileでGoogleマップを簡単に表示できる”jquery-ui-map”の紹介をネットサーフィン中に見かけたので試してみた。
メモ
- pageinitでgmapオブジェクトを作ったけど、あってるかわからない。
- マップ書き先(map_canvas)の幅と高さ(style=”width:250px;height:250px”)を指定しなかったら、表示されなかった。
- refreshメソッドは呼ばなくても表示された。
確認ページ：hello_jQuery_mobile_gmap.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery MobileでGoogleマップ(jquery-ui-map)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/ -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- http://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_tutorial -->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="jquery-ui-map/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).delegate("#home", "pageinit", function() {
console.log('[pageinit] start');
var latlng = new google.maps.LatLng(35.658517, 139.701334);
$('#map_canvas').gmap({
'center': latlng,
'zoom': 12,
'callback': function() {
console.log('callback function load');
}
});
});
$(document).delegate("#home", "pageshow", function() {
console.log('[pageshow] start');
$('#map_canvas').gmap('refresh'); // refresh呼ばなくても地図表示された
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery MobileでGoogleマップ(jquery-ui-map)</h1>
</div>
<div data-role="content">
<div id="map_canvas" style="width:250px;height:250px"></div>
</div>
<div data-role="footer">
<h4>Copyright 2012</h4>
</div>
</div>
</body>
</html>
参考サイト
- jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた – かちびと.net
- jquery-ui-map – Google map v3 plugin for jQuery and jQuery Mobile – Google Project Hosting
- jquery_ui_map_v_3_tutorial – jquery-ui-map – Google map v3 plugin for jQuery and jQuery Mobile – Google Project Hosting
関連エントリー
