Googleマップの設置
「アクセス」のページ（#access）では、Googleマップを利用して地図を表示しましょう。Googleマップでは地図ページ（http://maps.google.co.jp/）の右上から、ページへ地図を埋め込めるiframeタグを取得できます。
Google Mapではサイトに地図を埋め込めるiframeが公開されている
ただし、Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されません（サンプル16）。
■サンプル16[HTML]
<div data-role="content">
<h2 class="h1">アクセス</h2>
<iframe width="425" ...中略... 大きな地図で見る</a></small>
</div>
そこで、iframeは使わずに、Google Maps API（http://code.google.com/intl/ja/apis/maps/documentation/javascript/）を使って地図を読み込みます。
最初に、Google Maps APIのスクリプトをhead要素内で読み込みます。
■サンプル17[HTML]
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
次に、コンテンツ要素内にid属性「map」、class属性「ui-shadow」を付けたdiv要素を配置します。class属性「ui-shadow」は、要素に対してドロップシャドウを付けるスタイルで、jQuery Mobileであらかじめ定義されています。
■サンプル17[HTML]
<div data-role="content">
<h2 class="h1">アクセス</h2>
<div id="map" class="ui-shadow"></div>
</div>
CSSではdiv#mapに対して、width、height、borderを設定します。コンテンツ幅が100%を超えて描画されないように、CSS3のbox-sizing:border-boxを利用し、borderをwidthに含めるようにも設定します。
■サンプル17[CSS]
div#map{
width:100%;
height:400px;
border:4px solid white;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
最後に、JavaScriptの設定です。Google Maps APIで公開されているサンプルコードをもとに、地図を表示する簡単なスクリプトを書いてみましょう。以下にサンプルコードを示します。
<script>
$(function(){
var myLatlng = new google.maps.LatLng(緯度,経度);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
});
</script>
経度と緯度のところには、目的地の緯度・経度を記述してください。緯度・経度は「経度緯度検索」（http://www.webcreativepark.net/labs/longitude_iatitude/）などのサービスで調べられます。
通常はこれで完成ですが、jQuery Mobileの場合はもう一工夫必要です。jQuery MobileではJavaScriptを使ってページを擬似的に生成しているので、先ほどのスクリプトが実行された時点では、地図を表示する要素がまだ表示されていません。表示されていない要素に地図を表示しようとすると、座標が狂ったり、灰色の地図が描画されたりしてしまう不具合があるので、次のようなスクリプトで調整します。
■サンプル17[JavaScript]
<script>
$(function(){
....中略...
$('div#access').live('pageshow',function(){
google.maps.event.trigger(map, 'resize'); 【1】
map.setCenter(myLatlng); 【2】
});
});
</script>
$(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行されます。サンプル17では、【1】で地図の再描画を、【2】で地図の中央位置を再設定するGoogle Maps APIの命令を実行し、アクセスページに遷移したタイミングで地図を調整しています。
最後は少し複雑になってしまいましたが、以上でアクセスページに地図を表示できました。
アクセスページに表示されたGoogleマップ
次回は、残る「お問い合わせ」のページ（#contact）を作りながら、jQuery MobileのフォームUIについて解説します。
著者：西畑一馬（にしはた かずま）
to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。
