jQuery Mobile でGoogle Mapsを表示する

jQuery Mobile でGoogle Mapsを表示する際の注意点。PCのブラウザに表示する場合と基本的には同じだが、(1)地図表示のタイミング、(2)表示するdiv領域のheight指定、がポイントになる。
mlocplan01.html

• 地図の表示領域を用意する

<!-- HTML -->
<div data-role="page" id="pgSpotMap">
  <div data-role="header" ><h2>Map</h2></div>
  <div data-role="content">
    <div id="mMap" class="ui-shadow"></div>
    <!-- class="ui-shadow"で要素に影をつける。<div id="mMap"> でも地図表示はOK-->
  </div>
</div>

HTMLでjQuery Mobileのページ(#pgSpotMap)に領域(#mMap)を用意した。

• 地図表示のイベントハンドラを用意する

// JavaScript
var gMap = null;
$(document).on('pageshow','#pgSpotMap', drawMap );

ページ(#pgSpotMap)が表示されるタイミングで、地図を表示する自作の関数 drawMapを呼び出す。どのイベントを捕捉すべきかは考慮の余地あり。

• 地図を表示する

地図の初期化：ページが表示される最初の1回だけでいいので、以下のようにする。

// JavaScript
function drawMap(){
  if (gMap == null){
    initMapM(); // 地図の初期化
  }
}

さらに、地図を表示するdiv領域(#mMap)のheightを指定する。これはGoogle Mapsの仕様上必須。あとは通常の地図表示と同じ。

// JavaScript
function initMapM(){
  var bodyHeight = $('body').height();
  $("#mMap").css('height',bodyHeight); // 地図領域の高さを明示的に指定
  // 以下は通常と同じ
  var latlng = new google.maps.LatLng(35.709984, 139.810703);
  var opts = {        
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  gMap = new google.maps.Map(document.getElementById('mMap'), opts);
}

heightの設定については、実際のページの構成に応じて個別に考える必要がある。ちなみに、’div id=”mMap” class=”ui-shadow”‘とすると、コピーライトの文字が隠れてしまうようだ。また、jQuery MobileがいろいろDOMを操作するので、(再)設定するタイミングについても検討の余地あり。

• Google Mapsのサイズについて(4/6追記)

ヘッダとフッタ以外を地図で埋めたい場合、サイズはとりあえず以下のように設定するといいようだ。(ページのidは’#pgSpotMap’、地図を表示するdiv領域のidが’#mMap’の場合。)

// JavaScript
var height = $(window).height() - 
   $('#pgSpotMap').find('[data-role="header"]').outerHeight() - 
   $('#pgSpotMap').find('[data-role="footer"]').outerHeight();
var width = $(window).width() - 20; // 20は左右の余白分。
$('#mMap').height(height);
$('#mMap').width(width);

• Google Mapsのresizeイベントを明示的に発生させる

Google Maps Referenceには、’Developers should trigger this event on the map when the div changes size:’ とあるので、Google Mapsの表示領域のサイズを変更したタイミングでresizeイベントを発生させる。

google.maps.event.trigger(gMap, 'resize');

参考：Google Maps Reference

• 実行例


初期画面(メニュー)：

PCのブラウザ(firefox)でも同じように表示される：