読者です 読者をやめる 読者になる 読者になる

Google Mapsの設置

Google

GoogleMap


f:id:web-design-lesson:20160627132616p:plain

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

Google Maps API

iframeは使わずに、Google Maps APIhttp://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」を付けたdiv要素を配置
<div id="content">
<h2 class="h1">アクセス</h2>
<div id="map"></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;
}


jQueryでは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によってページが生成されたときに実行されます
  • 経度と緯度のところには、目的地の緯度・経度を記述します

緯度経度とは?

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


緯度経度検索



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