2/13 jQuery MobileでGoogle Mapsの設置

smartphone

iframeで設置

Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されない。

<div data-role="content">
<h2 class="h1">アクセス</h2>
<iframe width="425"  ...中略... 大きな地図で見<e3><82><8b></a></small>
</div>



大きな地図で見る

Google Maps APIのスクリプトをhead要素内で読み込む

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  • コンテンツ要素内にid属性「map」、class属性「ui-shadow」を付けたdiv要素を配置
  • 「ui-shadow」は、要素に対してドロップシャドウを付けるスタイルで、jQuery Mobileであらかじめ定義されている。
<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に含めるようにも設定する。
div#map{
  width:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
}

<script>
$('div#access').live('pageshow',function(){
  var myLatlng = new google.maps.LatLng(35.71688, 139.770611);
  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>


緯度経度検索

Geocoding
SEAGATE
緯度経度検索 : Plus-α.net
Google Maps ジオコーディング：逆ジオコーディング