jQuery mobileでGoogleマップを表示する(jquery-ui-map)

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>

参考サイト

関連エントリー

  1. jQuery mobileでボタンを無効化/有効化したい
  2. jQuery mobileのナビゲーションバーとデフォルト設定
  3. はじめてのjQuery mobile
  4. jQuery mobileのフォーム
  5. jQuery mobileの開閉パネル
This entry was posted in 未分類 and tagged , , . Bookmark the permalink.