西畑一馬のjQuery Mobileデザイン入門 ― 第3回

jQuery Mobileのマークアップの基本とCSSの変更

2011年06月06日 10時00分更新

西畑一馬／to-R

ツイートする

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デザイン入門」（アスキー・メディアワークス刊）がある。

前へ 1 2 3 4 5 6 次へ