Google Mapsの設置

GoogleMap

「アクセス」のページ（#access）では、Googleマップを利用して地図を表示します
ただし、Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されません

<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要素内で読み込む

<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であらかじめ定義されています

<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;
}

Google Maps APIで公開されているサンプルコードをもとに、地図を表示する簡単なスクリプトを書いてみます

jQuery MobileではJavaScriptを使ってページを擬似的に生成しているので、Google Maps APIのサンプルの記述のみでは、スクリプトが実行された時点で地図を表示する要素がまだ表示されていません。
再読み込みが必要だったり、表示されていない要素に地図を表示しようとすると、座標が狂ったり、灰色の地図が描画されたりしてしまう不具合があります。

<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>

$(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行されます
経度と緯度のところには、目的地の緯度・経度を記述します

緯度経度とは？

緯度（latitude）経度（longitude）とは、天体上の位置を示す座標のことである
緯度経度さえあれば、地球上のあらゆる地点を正確に機械的に特定することができる
Google Maps APIでは主に緯度経度を指定して、地図を表示したり、アイコンを表示させたりします

日本測地系：明治時代に東京天文台を基準に定められた
世界測地系：衛星などを用いて地球の形状など明らかにし、世界的な整合性をもって構築された国際的に定められている。法改正により世界測地系への移行が進んでいる
国土地理院

緯度経度検索

Geocoding

SEAGATE

緯度経度検索 : Plus-α.net

Google Maps ジオコーディング：逆ジオコーディング

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>iPhone Test</title>
  </head>
  <body>
    <a href="http://maps.google.com/maps?q=35.681382,139.766084(東京駅)">マップで見る</a>
  </body>
</html>

URLスキーマ

http://maps.google.com/maps?daddr=&saddr=現在地&dirflg=r&t=m

daddr	目的地。緯度・経度、住所やキーワードなど、Googleマップで検索可能ならOK
saddr	出発地。現在地から出発する場合、日本語なら「現在地」英語環境なら「Current%20Location」と入力
dirflg	移動手段。 r：公共交通機関（電車など） d：自動車 w：徒歩
t	表示するマップの種類。 m：標準マップ k：航空写真 h：マップ＋写真

電話

電話番号を記述したところに電話発信のリンクをつけると、そこをタップして直接発信できます

<a href="tel:03-0000-0000">03-0000-0000</a>

メール

メールアドレスへのリンク設定もPCと同様の書き方で可能です

<a href="mail:abcd@aaaaa.com">abcd@aaaaa.com</a>

iTunes Store

iTunesを立ち上げiTunes Storeへアクセスし、リンクしたい作品のタイトル部分を右クリックすると”リンクをコピー”という文字が出てくるのでそれを選択

<a href="コピーしたリンクを貼り付け">iTunes Store</a>

Webサイト制作科 - 作品紹介