20120510:Google Maps を使う

PHPのファイルは、UTF-8、BOMなしで保存し、
www.cyaneum.orgのpublic_htmlに置く！
テーマ研究会（05/10）
Google Mapsを使う
政策情報学部
渡辺恭人
[email protected]
メーリングリスト [email protected]
資料
http://www.cuc.ac.jp/rg11/
前回の課題（１）＋α
• ＋α
– 単に$addrを変更するだけでは面白くない
– 利用者がブラウザ（IEなど）から入力できるとよい
– テーマ研究会1で習った内容を復習して使う
• フォームで入力させ、POSTやGETを使って送信
• 実現方法
– 入力用のフォームのHTMLファイルを新規作成
– フォームから送信された住所の文字列を受信す
る部分をgc2.phpに追加する→gc3.phpとする
2
入力用のフォームのHTMLファイルを
新規作成
• sendaddr.htm ※UTF-8で保存
– 入力用のフォームをHTMLで作成
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>住所入力</title>
</head>
<body>
<form method="POST" action="gc3.php">
住所：
<input type="text" name="addr" size=“30" />
<input type="submit" value="送信" />
</form>
</body>
</html>
3
sendaddr.htm送信された住所の文字
列を受信する部分をgc2.phpに追加
• gc2.phpを改造して、sendaddr.htmからPOSTで
送信された住所の文字列を受信し、処理する
– 処理内容は変更無し
• Geocodingを利用して緯度・経度を取得
• Heartrails expressを利用して、緯度・経度から最寄り駅
を検索
gc3.phpとして保存
• 結果を表示
• 変更点
– $addrのところを、POSTで受信したパラメタにする
$addr = $_POST['addr'];
4
Google Maps API
• Google Maps
– Google社が提供するオンライン地図サービス
• Google Maps API
– 外部の開発者が利用できるように提供されたAPI
• 使うには
– 「Version 3」（以下V3と略）が2009年5月27日に公
開
– これまでは利用するために、登録とAPI keyの取
得が必須だったが不要になった
5
サンプル（前半）
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps API V3 サンプル</title>

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
//地図の座標位置(経度,緯度)を設定
var latlng = new google.maps.LatLng(35.741862,139.908314);
//地図必須プロパティを設定
var myOptions = {
//地図の初期ズーム値
zoom: 18,
6
PC用のサンプル（後半）
//地図の初期中心位置(経度,緯度)を設定
center: latlng,
//地図タイプを設定
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//地図を生成し、指定したHTMLエレメントに表示
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
7
PHPと組み合わせる
• Google Maps APIはJavaScriptからの利用を前
提に作られており、そのままではPHPで使え
ない
• ライブラリ「GoogleMapsAPIクラス」を使用する
– Phpinsider.comから配布されている
– PHPの知識のみでGoogleMapsAPIを利用可能
– 日本対応部分は、秋元裕樹氏作成の日本向け
対応クラスを利用する
8
携帯電話の制約
• PCのように、JavaScriptがブラウザから使えず、
Ajaxにも対応していないので、Google Mapsなど
の楽しいWebアプリは使えない
• しかし、地図を利用したいアプリやサービスはた
くさんある
• 解決法
– 地図画像を静止画として利用する
– Google Static Maps API(Googleマップの静的画像用
API)が公開
• https://developers.google.com/maps/documentation/static
maps/?hl=ja
9
地図を静止画で出力する方法
• Google Static Maps API(Googleマップの静的
画像用API)を使う
– https://developers.google.com/maps/documentat
ion/staticmaps/?hl=ja
• 使い方例
– 「千葉商科大学を中心に、ズームレベル14で、画
像サイズを240ドット×320ドットで表示する
– http://maps.google.com/maps/api/staticmap?ce
nter=35.741518,139.9077299&zoom=14&size=24
0x320
このURLをブラウザで開くか HTMLの中でIMGタグに
10
組み込む
留意点
• Static mapを使用するときは、パラメタsensor
が必須となる
– sensor（必須）は、静的マップをリクエストしている
アプリケーションがユーザーの位置情報を取得す
るのにセンサーを用いているかを指定します。
– このパラメータはすべての静的マップのリクエスト
に必須です。
– 例、sensor=true または false
11
使い方例の地図画像
12
地図の種類を変える
• パラメタ名： maptype
– roadmap（デフォルト）
• Google マップウェブサイトで通常表示される標準の道路地図画
像
– satellite 航空写真
– terrain 物理的な地形図画像です。地形や植生
– hybrid 航空写真と道路地図を組み合わせたもので、航
空写真の上に主要な道路や場所の名前の透過レイヤが
表示される
• 例
– http://maps.google.com/maps/api/staticmap?center=35.7
41518,139.9077299&zoom=14&size=240x320&maptype=
hybrid
13
画像にマーカーを追加する
• URLにマーカーの座標と設定値を並べて書く
– markers=markerStyles|markerLocation1| markerLocat
ion2|
• 設定値（オプションなくてもよい。これらを「|」でつ
なげて書く。）
– 大きさ： size: {tiny, mid, small} 省略すると普通のサ
イズ
– 色： color: {black, brown, green, purple, yellow, blue,
gray, orange, red, white}.
– Label: アルファベットまたは番号： alphanumericcharacter {A-Z, 0-9}
14
画像にマーカーを追加する
• 例
– 千葉商科大学に青で「S」の文字のマーカーを付
ける
http://maps.google.com/maps/api/staticmap?center=35.74
1862,139.908314&zoom=14&size=400x400&markers=color
:blue|label:S|35.741862,139.908314&sensor=false
center=35.741862,139.908314 は省略可能
自動的に適切な地図を作成する
15
さらにマーカーを追加する
• マーカー毎に、&markersから設定値と位置情
報を付ける
• 例、国府台駅の緑で「G」の文字のマーカーを
付ける
http://maps.google.com/maps/api/staticmap?center=35.741518,139.
9077299&zoom=15&size=400x400&markers=color:blue|label:S|35.7
41862,139.908314&markers=color:green|label:G|35.736411,139.902
906&sensor=false
16
位置情報の取得
• 携帯電話やスマートフォンにはGPSが内蔵さ
れていることが多く、地球上の絶対位置（緯
度・経度・（高度））を取得することができる
• GPSが使えない場合
– 大まかな位置を取得することができる
• 携帯電話では基地局情報
• PCやスマートフォンではネットワーク位置情報
17
携帯電話での位置情報取得
• 各携帯電話会社ごとに方法は異なるが、GETや
POSTでサーバに送る仕組みがある（資料参照）
• サンプルプログラムを試す
• http://www.cyaneum.org/~riho-m/keitai_loc.zipをダウン
ロードして展開
• 3つのファイルを、www.cyaneum.orgの自分の
publuc_htmlに転送する。
• 次に、携帯電話から、http://www.cyaenum.org/~ユーザ
名/gps.phpにアクセスする
18
PCやスマートフォンで位置情報取得
• HTML5のgeolocation APIを使用する
– JavaScriptから呼び出す
• サンプルプログラムを試す
• http://www.cyaneum.org/~riho-m/geo0.zipをダウンロード
して展開
• geo0.htmlファイルを、www.cyaneum.orgの自分の
publuc_htmlに転送する。
• 次に、PCまたはスマートフォンから、
http://www.cyaenum.org/~ユーザ名/gps.phpにアクセス
する（※PCの場合は、FirefoxかChromeブラウザを使う）
19
課題
• 後半のGoogle Mapsを静止画で利用する部分を
gc3.phpに追加して、検索された最寄り駅をGoogle
Mapsで表示させなさい。入力実行したプログラムと、
その実行結果をレポートしなさい。
– レベル0: 結果ごとに地図を表示させる
– レベル1: 地図にマーカーを付ける
– 上級レベル: 検索結果を1つの地図に複数マーカーで表
示させる
• レポート方法
– プログラムそのもの（テキスト）
– 実行画面のスクリーンダンプ
– 感想
20
課題（つづき）
• 提出物
– プログラムファイルと実行結果をWordのファイルに貼り付
けて、メールで提出する
• 実行画面は、フリーソフトのWinShotを使うか、または、Altキー＋
PrintScreenキーを使う。
– ファイル名： kadai0510-学籍番号.doc
• 提出方法
– メールで、[email protected]に送る
– 私個人宛のメールは受け取らないので注意
• 締切
– 5/16 18:00
21

Download Report