jquery-ui-mapを使ってみる

はじめに

超遅いですが、最近jQueryやってみてます。まだまだ基本をやらないといけないのですが、興味はjQuery Mobileにも移って、で、なんとなくマップを表示させてみようと思いました。
ということで、色々調べてみたところgoogle map表示させるにはjquery-ui-mapを使うのが簡単そうです。
http://code.google.com/p/jquery-ui-map/からプラグインをダウンロードして使います。3.0-alphaを使っています。
jQuery Mobileの基本的なとこは、くろのさんの記事野中さんの記事でどうぞ。

使ってみる

jquery-ui-mapを使うには、

<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.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-map-3.0-alpha/ui/jquery.ui.map.js"></script>

のライブラリをロードします。

htmlには、マップを表示させる場所を作ります。

<div id="map_canvas" style="width=100%;height:350px;"></div>

適当なidを付けておきます。

最後にJavaScriptです。ひとまずマップを表示させるだけなら次の記述だけで終わりです。

$(function() {
	$("#map_canvas").gmap({"center":"681382, 139.766084”, "zoom":15});
});

上で作ったmap_canvasというidが付いたdivにマップを表示させています。

iphoneで見るとこんな感じになってます。

さらにマーカーを追加しようと思います。次のコードを追加します。

$("#map_canvas").gmap("addMarker", {"position":"681382, 139.766084”, "animation":google.maps.Animation.DROP, "title":"Hello"}, function(map, marker){
	$("#map_canvas").gmap("addInfoWindow", {"position":marker.getPosition(), "content":"Hello World"}, function(iw){
		$(marker).click(function(){
			iw.open(map, marker);
			map.panTo(marker.getPosition());
		});
	});
});

これでマーカーがドロップのアニメーションで追加されます。そのマーカーをクリックすると「Hellow World」と書かれた吹き出しが表示されます。

今回作ったhtmlの全体はこんな感じです。

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<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.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	<script type="text/javascript" src="jquery-ui-map-3.0-alpha/ui/jquery.ui.map.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#map_canvas").gmap({"center":getLatLng(), "zoom":15});
			
			$("#map_canvas").gmap("addMarker", {"position":getLatLng(), "animation":google.maps.Animation.DROP, "title":"Hello"}, function(map, marker){
				$("#map_canvas").gmap("addInfoWindow", {"position":marker.getPosition(), "content":"Hello World"}, function(iw){
						$(marker).click(function(){
							iw.open(map, marker);
							map.panTo(marker.getPosition());
						});
				});
			});
			function getLatLng(){
				return new google.maps.LatLng(35.681382, 139.766084);
			}

		});
	</script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>google map</h1>
	</div>
	<div data-role="content">
		<div id="map_canvas" style="width=100%;height:350px;"></div>
	</div>
	<div data-role="footer">
		<h4>google map</h4>
	</div>
</div>
</body>
</html>

この記事を参考にしています。