テーマ研究会（05/10）
Google Mapsを使う
政策情報学部
渡辺恭人
riho-m@cuc.ac.jp
メーリングリスト riho-m-rg11@cuc.ac.jp
PHPのファイルは、UTF-8、BOMなしで保存し、
www.cyaneum.orgのpublic_htmlに置く！
資料 http://www.cuc.ac.jp/rg11/
前回の課題（１）＋α
• ＋α
– 単に$addrを変更するだけでは面白くない
– 利用者がブラウザ（IEなど）から入力できるとよい
– テーマ研究会1で習った内容を復習して使う
• フォームで入力させ、POSTやGETを使って送信
• 実現方法
– 入力用のフォームのHTMLファイルを新規作成
– フォームから送信された住所の文字列を受信す
る部分をgc2.phpに追加する→gc3.phpとする
2
入力用のフォームのHTMLファイルを
新規作成
• sendaddr.htm ※UTF-8で保存
– 入力用のフォームをHTMLで作成
3
<!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>
sendaddr.htm送信された住所の文字
列を受信する部分をgc2.phpに追加
• gc2.phpを改造して、sendaddr.htmからPOSTで
送信された住所の文字列を受信し、処理する
– 処理内容は変更無し
• Geocodingを利用して緯度・経度を取得
• Heartrails expressを利用して、緯度・経度から最寄り駅
を検索
• 結果を表示
• 変更点
– $addrのところを、POSTで受信したパラメタにする
4
$addr = $_POST['addr'];
gc3.phpとして保存
Google Maps API
• Google Maps
– Google社が提供するオンライン地図サービス
• Google Maps API
– 外部の開発者が利用できるように提供されたAPI
• 使うには
– 「Version 3」（以下V3と略）が2009年5月27日に公
開
– これまでは利用するために、登録とAPI keyの取
得が必須だったが不要になった
5
サンプル（前半）
<html> <head>
<!--iPhone用フルスクリーン表示設定-->
<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>
<!--Google Maps APIの読み込み--> <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 = {
//地図の初期ズーム値
PC用のサンプル（後半）
//地図の初期中心位置(経度,緯度)を設定 center: latlng, //地図タイプを設定 mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図を生成し、指定したHTMLエレメントに表示var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <!--ページ読み込み後にinitialize()関数を実行--> <body onload="initialize()"> <!--地図表示用の領域を幅・高さ100%で設定-->
<div id="map_canvas" style="width:100%; height:100%"></div> </body>
</html>
