このページの本文へ

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

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

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

Googleマップの設置

 「アクセス」のページ(#access)では、Googleマップを利用して地図を表示しましょう。Googleマップでは地図ページ(http://maps.google.co.jp/)の右上から、ページへ地図を埋め込めるiframeタグを取得できます。

14.png
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の命令を実行し、アクセスページに遷移したタイミングで地図を調整しています。

 最後は少し複雑になってしまいましたが、以上でアクセスページに地図を表示できました。

15.png
アクセスページに表示されたGoogleマップ

 次回は、残る「お問い合わせ」のページ(#contact)を作りながら、jQuery MobileのフォームUIについて解説します。


著者:西畑一馬(にしはた かずま)

著者写真

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」(アスキー・メディアワークス刊)がある。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く