スマホ用にgoogle mapを取得

◆スマホ用にgoogle mapを取得

PCサイトの場合はiframeでもいいが、スマホではiframeは表示されない場合があるため『Google Maps API』で地図を読み込む。

• Google Maps APIのスクリプトををhead要素に読み込む。

• scriptを記述

<script>
$('div#access').live('pageshow',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>

• • 的確に地図を表示するために、「緯度・経度」を必ず記述する。
    • 緯度経度検索
      geocoding
        ※「検索」ボタン左隣の『TOKYO97』にチェックを入れると日本測地系になる
      seagate
      plus-a.net
      Google Maps ジオコーディング：逆ジオコーディング
  • $(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行される。
  • zoom: 15　の部分で拡大率を表示。

• 地図を表示するコンテンツ要素内に<div id="map">、<div 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:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
}

• • jQuery Mobileは外部CSSを読み込んおり外部CSSを変更することはできないので、変更を加える場合はエンベッドでCSSを設定する。
  • mapのページの<p>を変更したい場合は、「div#map p」のようにページ名から指定する。
  • box-sizing:border-boxで、borderをwidthに含めるように設定。
  • スマホは画像の多様はさける（データが重くなり、サイト全体の表示がおそくなる）。画像は.pngを使わず.jpgにする。