| （A）勉強会 | （B）テーマ詳細 | （C）団欒の時 | 第1日目 | 第２日目 | 第３日目 | 第４日目 |
（Ｂ）勉強テーマの詳細
宿舎となったペンション・シャレー・クリスチャニアでは無線LANの施設が提供されていますので、Google Maps API 及びGoogle Earthの実践的演習を集中的に行いました。
ペンション・シャレー・クリスチャニアの会議室での夜の勉強会風景
特にこの3人は夜遅くまで熱心に実習に励みました
（１） GoogleMap及びYahooMap関連
☆ KMLファイルとは
KML は、Google Earth、Google マップ、モバイル Google マップなどの Earth ブラウザで、地理データの表示に使用するファイル形式です。ファイル形式はYahoo Mapにも互換性があります。
KML はネストされた要素や属性を含むタグ構造を使用し、XML スタンダードをベースにしています。すべてのタグで大文字と小文字が区別されます。
KMLの詳細な仕様は下のGoogleサイトを参照下さい。
http://code.google.com/intl/ja/apis/kml/documentation/
CASIO EX-H20Gというデジカメは地図情報をKML形式のログとして生成しますので、このログを使って自分の地図を描画することが出来ます。
☆ GPS機能付きデジカメからのKMLログファイルの取り出し
０． カメラ電源On→地図印→Menu→地図設定タブ→ログの保持
１． カメラとパソコンをUSBケーブルでつなぐ
２． （マイ・）コンピューターの中のCASIO EX-H20Gを選ぶ
３． フォルダーを開いていきKMLフォルダーをコピーしてパソコンの中に保存する
☆ KMLファイルのGoogleMapsへのプロッティング
先ず、KMLファイルとGoogleEarthの関連付けを行う。
それには、「スタート」ボタン →「既定のプログラム」→「ファイルの種類またはプロトコルのプログラムへの関連付け」→
＜KML拡張子選択＞ → 「プログラムの変更」ボタン → 「GoogleEarth」選択。
その上で、パソコンの中に保存したKMLファイルをダブル・クリックするとGoogleErathが自動的に呼び出されて、その地図上にCASIO EX-H20Gが生成したログに従って地図を描きます。
☆ KMLファイルの地図の見栄をよくするためのTeraPadによる編集の必要性
CASIO EX-H20Gの仕様によりますとカメラのGPS機能はGPSスウィッチをOnにしている限り１０分毎に地図情報をログに書き込むとありますが、CASIOの技術者に尋ねたところルートの軌跡を滑らかにするために実際には4秒ごとにWayPoint（通過地点）の情報を書き出しているそうです。従った、CASIO EX-H20Gが出力したログをそのまま地図にプロットするとWayPointが余りのも多く表示されて非常に見苦しいものになります。
そこで、TeraPadを使ってWayPointを間引きしたり、必要な情報を追加したりする必要が出てくる訳です。
その為には必要最小限のKMLの仕様を知る必要に迫られます。
☆ KMLのタグの仕様の概要
<?xml version="1.0" encoding="UTF-8"?> XML形式でUTF-８コーディングを規定
<kml> ～ </kml> KMLファイルの大枠
<Document> ～ </Document> KMLファイルの名前等
<Folder> ～ </Folder> フォルダーの枠
<Placemark> ～ </Placemark> 場所毎の情報を格納
<LineString> ～ </LineString> 軌跡の線の情報を格納
<coordinates> ～ </coordinates> 軌跡の座標を格納
上の図で判りますように、すべてにタグは対になって、ネスティングされています。上の６つのタグが基本的なものです。
☆ 場所タグ <Placemark> ~ </Placemark>の仕様例
<Placemark>
<name>民宿岡田</name>
<description><![CDATA[2011/03/29 07:50 出発 <br>
六十六番雲辺寺登山の要衝で<br>
歩き遍路の人気宿<br>
<IMG src="D:/Documents/０１ウェブ・サイト活動中/たそがれ長兵衛_HPBサイト
/folder_henro/kml/image_sanu01/ph_sanu01_01.jpg"
width="200" height="150" border="0"
hspace="3" vspace="3">]]>
</description>
<styleUrl>#gpsplacemark</styleUrl>
<Point>
<coordinates>133.704228,34.002096,246.1</coordinates>
</Point>
</Placemark>
上の例は筆者の「お遍路サイト」に組み込んだＧｏｏｇｌｅＭａｐｓの「民宿岡田」のある地点に吹き出される情報ウィンドウの仕様例です。
＊ <Placemark> ～ </Placemark> で全体を囲みます。
＊ <name> ～ </name> はＷａｙｐｏｉｎｔ通過点名及び情報ウィンドウのタイトル名です。
＊ <description>で情報ウィンドウに表示する内容を書き入れますが、その中も<![CDATA[ ～ ]]>で囲みます。
＊ 情報ウィンドウの内容の整頓はＨＴＭＬでお馴染みなＴａｂｌｅタグが使えます。 但し、必ずしも使わなくてもよい。
＊ 写真等のＩｍａｇｅは<image src="写真の保存場所"・・・・>を使います。
＊ 写真の保存場所は上の例では相対アドレスを使っていますが、絶対アドレス（http://・・・・）を使った方が早く表示
されるようです。
☆ KMLのTeraPadによる編集
１．CASIO EX-H20Gで生成されたログの場所タグ<Placemark>は<name>P0001</name>から始まり<name>P0002</name>・・・<name>P000n</name>のように４秒ごとに沢山生成されて必ずしも表示する必要なないの場所情報を含むので、地図と照合しながら不要と思われる場所タグPlacemark> <name>Pxxxn</name> ～ </Placemark>を削除していく。
２．残しておきたいキー・ポイントになる場所に就いては；
Placemark><name>民宿岡田</name></Placemark>のように名前を自分で判別できるようなものに書きかえる。
３．必要に応じて<description>のその場所に就いての説明文や写真を挿入する。
説明文や写真の挿入の仕方は上の<description>の仕様例を参考にして下さい。
４．任意のPlacemarkのCoodinatesの求め方；
GoogleEarthを立上げ、座標を求めるたい場所を検索し、その場所に名前を付けてKML形式で保存し、TeraPadで表示する。
或いはＹａｈｏｏのＲｏｕｔｅ Ｌａｂを使い、座標を求めたい場所付近の数箇所を結ぶ軌跡を作成し、TeraPadで表示してもその場所の経度、緯度、及び標高は求められます。
５．ＫＭＬファイルはウェブ・サーバーのアップロードされた後、高速処理のためのＧｏｏｇｌｅサーバーにもキャッシングされますので短時間に連続して更新するような場合は、最新の変更は直ぐに反映されない場合があります。時間が経てば更新されます。
☆ GoogleMaps API の種類とバージョン
GoogleMaps API は、誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスで、色々なバージョンがあります。
＊Maps JavaScript API V2： Googleに登録してAPキーを取得する必要があります。
JavaScript を使って、Google マップをウェブページに埋め込むことができます。
＊Maps JavaScript API V3： 最新のもので、APキーを取得する必要がありません。
JavaScript を使って、Google マップをウェブページに埋め込むことができます。今回はこのバージョンを中心に勉強します。
＊Maps API for Flash： Flash ベースのウェブページやアプリケーションに Google マップを埋め込むことができます。
＊Google Earth AP： リアルな 3D デジタル地球儀をウェブページに埋め込むことができます。
ウェブページから移動することなく、訪問者を世界中のあらゆる場所に（海の中にでも）案内できます。
＊Maps Premier API： 有料の企業向けサービス。
☆ GoogleMaps API JavaScriptV3の入門
Google Maps JavaScript API を使用すると、Google マップをウェブページに埋め込むことができます。この API のV 3 は、従来のパソコン用ブラウザ アプリケーションとしてだけでなく、携帯端末でも快適に動作するように設計されています。
この バージョンでは http://maps.google.co.jp サイトで使用できるような地図を操作し、さまざまなサービスを介してコンテンツを地図に追加するための多数のユーティリティを提供しています。これを利用して、ウェブサイトにパワフルな地図アプリケーションを作成できます。
詳細は http://code.google.com/intl/ja/apis/maps/documentation/javascript/
入門の為の組み込みSample:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP };
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>
説明：
自分のウェブ・ページの指定した範囲 <div id="map_canvas" style="width:100%;
height:100%"></div>
の中に緯度・経度が.LatLng(-34.397, 150.644);で指定された地点を中心としたGoogleMaps が組み込まれます。
自分の欲する緯度・経度を求めるにはGoogleMapsで自分の求める場所を表示して、その場所を右クリックしてポップアップされるメニューから「この場所について」を選択する。
☆ Google Maps API の基本構成
１． 地図の DOM 要素
地図をウェブページに表示するには、そのための領域を用意する必要があります。
これには、ブラウザのドキュメント オブジェクト モデル（DOM）内で名前付きの div 要素を作成し、この要素への参照を取得するのが一般的です。
<div id="map_canvas" style="width: 100%; height: 100%"></div>
２．地図のオプション
地図を初期化するために、まず地図の初期化変数を持つ Map options オブジェクトを作成
します。以下のように地図の座標、ズームの程度、地図の種類などを初期化します。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_false">
</script>
<script type="text/javascript"> {
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
</script>
３．地図の基本オブジェクト
地図を表現する JavaScript クラスは Map クラスです。このクラスのオブジェクトは、
1 つの地図をページ上に生成します（このクラスのインスタンスを複数作成することで、別々の地図を同じページ上に生成することもできます）。
JavaScript の new 演算子を使用して、このクラスの新しいインスタンスを作成します。
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
４． 地図を読み込み
HTML ページをレンダリングすると同時に、ドキュメント オブジェクト モデル（DOM）を作成し、外部のすべての画像とスクリプトを取得して、document
オブジェクトに組み込みます。ページの読み込みが完了した後に、自分の地図をそのページだけに配置されるようにするには、HTML ページの <body>
要素が onload イベントを受信したときにのみ Map オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングをより正確にコントロールできます。
<body onload="initialize()">
☆ 追加したいKML情報はレイアーで追加する。
お遍路の伊予路のルート情報をKMLLayerとして追加した例
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(35.658613,139.745525);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer
("http://longhat.fan-site.net/folder_henro/sanu01/kml/110329_0401.KML");
ctaLayer.setMap(map);
}
</script>
説明：
myLatLngとして地図の中心を四国香川県(35.658613,139.745525)に設定しています。
地図の種類には：
• ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。
• SATELLITE は写真タイルを表示します。
• HYBRID は、写真タイルと主要な機能（道路、地名）のタイル レイヤを組み合わせて表示します。
• TERRAIN は、物理的な起伏を示すタイルで、高度や水系（山、河川など）を表示します。
がありますが、ここでは一般的に使用されているROADMAPを指定してあります。
KMLファイルのURLを指定して、このKLMの情報をGoogleMapsに表示してあります。
この地図は「たそがれ長兵衛」サイト → 「四国お遍路紀行」→ 「讃岐の国巡り前半」 → 「6日間の遍路紀行」
と進み、表示された行程目次の頁の下の方に表示されています。
地図を「＋」印をクリックして、拡大してみて下さい。
ルート上の通過ポイントのどれか◎アイコンをクリックするとその場所の情報が表示されます。
これらの情報は指定したKMLファイルに規定されている情報です。
このKMLファイルをTeraPadで覗いてみて下さい。
ルートの出発点の◎アイコンをクリックして表示される情報は次頁の-<description>タグによって規定されています。
☆ 上の例で使われたKMLファイルの場所タグ<Placemark>の一部：
<Folder>
<name>2011/03/29to04/01</name>
<description>2011/03/29</description>
<Placemark>
<name>民宿岡田 7:50</name>
<description><![cdata[2011/03/29 07:54:37 (3D)<br>
六十六番雲辺寺登山の要衝で歩き遍路の人気宿
<table border="0" cellpadding="5" cellspacing="2">
<tr><td bgcolor=#99cc33 align=right>経度</td>
<td bgcolor=#ffff99>E133°42'15.44"</td>
<td bgcolor="#c8ffff" rowspan="5" width="177">
<img src="image_sanu01/ph_sanu01_01.jpg"
width="200" height="150" border="0" hspace="3"
vspace="3"></td></tr>
<tr><td bgcolor=#99cc33 align=right>緯度</td>
<td bgcolor=#ffff99>N34°0'07.55"</td></tr>
<tr><td bgcolor="#99cc33" align="right" nowrap>標高</td>
<td bgcolor=#ffff99>246.10m</td></tr>
</table>]]>
</description>
<styleUrl>#gpsplacemark</styleUrl>
<Point>
<coordinates>133.704228,34.002096,246.100000</coordinates>
</Point>
</Placemark>
☆ Maps JavaScript APIを利用する上で最低限必要なJavaScriptの基礎
基本的なSample(時刻表示)
<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
<!--
function ShowTime() {
dd = new Date();
document.write(dd.toLocaleString());
}
// -->
</script>
</head>
<body onload="ShowTime()">
</body>
</html>
説明：
＊ 通常JavaScriptコードは<head>～</head>の中に<script type="text/javascript">～</script>で囲んで書きます。
＊ <!-- ～ // -->は嘗てJavaScript非対応のBrowserの為に入れましたが、現在のBrowserは殆どがJavaScriptをサポートし
ているで今では書く必要はない。
＊ function()関数 は纏まった命令群を｛～｝で括って一発で実行するものです。
（）の中にはパラメターを指定して命令群の中に情報を伝えます。
＊ JavaScript はオブジェクト指向というプログラミング上の思想を受け継いでおり、ウィンドウや、ドキュメントやフォーム部品など
いろいろなものをオブジェクト（物）として扱います。オブジェクトには以下のようなものがあります。
数値（Number）、文字列（String）、真偽値（Boolean）、配列（Array）、数学関数（Math）、日付（Date）、関数（Function）
＊ オブジェクトは、値を参照したり設定するためのプロパティ（属性）を持ちます。例えば navigator.appVersion はBrowesr
のバージョンを表します。
＊ オブジェクトはまた、動作を指定するメソッド（処理）を持ちます。例えは警告を発するwindow.alert("Hello"); のように書きます。
＊ 変数は、名前のついた箱のようなもので、中に数値や文字列などの値を保持することができます。
例えば、変数はvar xx, yy, zz; やxx = 5;のように予め宣言しておかなければなりません。
参考： とほほのJavaScriptリファレンス http://www.tohoho-web.com/js/index.html
☆ Yahoo Route Labによるルート地図作成
YahooのMyYahooにもルート地図を作製する便利なサービスがあります。
ルートラボとは？
「ルートラボ」は、サイクリングコースや道案内などのルートを簡単に描いて公開できる
サービスです。
＊ 標高グラフで高低差や距離を確認しながらルートを描けます。
＊ GPSデータをルートとしてインポートし、編集、公開できます。
＊ 自分の登録したルートの一覧を確認し、編集・削除することができます。
ルート地図作成の手順
１．ルートラボのページを表示する URL: http://latlonglab.yahoo.co.jp/route/
２．「ルート」を描くボタンをクリックしてYahooMapを表示する
３．地図左上端の検索窓に求める地図の地名を入力して、その地の地図を表示する
４．地図上で通過するポイントをクリックしながらルートを描く
ポイントの選び方は：
道タビ・モード ： 明らかに通る道がある場合
直線モード ： 道を無視して直線に進みたい場合
の2通りがあり、失敗した場合は、1地点戻れます
５．ルートが完成し、SilverLight印が表示されたら「エクスポート」ボタンをクリック
６．KMLファイル・タイプでファイル名を指定して保存する
７．ここで作成されたKMLファイルを利用してGoogleEarthにプロットしたり、適当に
Placemarkを追加したものをKLMLayerとしてGoogleMapsに追加して自分のウェブ・ページに組み込むことが出来ます。
注１：GoogleErarthとKLMファイルの関連付け：
「スタート」→「既定のプログラム」→
「ファイルの種類またはプロトコルのプログラムへの関連付け」
→ ＜KML拡張子選択＞ → 「プログラムの変更」ボタン → 「GoogleEarth」選択
注２：Placemarkの作成
自分の求める場所のKML形式のPlacemarkはGoogleEarthで作成することが出来ます。
＊ GoogleEarthの検索窓に求める場所名、例えば「千葉駅」を入力して、「千葉駅」を表示させる。
＊ 画面左側のパネルにその場所例えば「千葉駅」が表示されるので、それを右クリック
して「名前を付けて保存」を選択する。
＊ ファイルの種類を「KML」に指定して名前を付けて、例えばchiba_stn.kmlとして保存する。
＊ TerPadでそのファイルを開き、自分の必要なPlacemarkの部分を利用する。
☆ ホームページ・ビルダーV15によるYahooMap及びGoogleMapsの組み込み
Yahoo！地図の挿入：
１．ウェブ・ページを開き、Yahoo!地図を挿入したい位置にカーソルを移動します。
２．メニューバーから［挿入－マップ－Yahoo!地図］を選択します。
３．［Yahoo!地図 アプリケーション ID 設定］ダイアログボックスが表示されます。
４．［登録ページをブラウザーで開く］ボタンをクリックします。
５．アプリケーションID の登録ページが表示されます。
６．記述されている手順に従って、アプリケーションID を登録します。
７．［Yahoo!地図 アプリケーション ID 設定］ダイアログボックスの［アプリケーション
ID］にアプリケーションID を入力、またはコピーしたものを貼り付けます。
８．［OK］ボタンをクリックします。
９．［地図の挿入 (Yahoo!地図)］ダイアログボックスが表示されます。
１０．各項目を設定し、［OK］ボタンをクリックします。
Yahoo!地図がページに挿入されます。
GoogleMaps地図の挿入：
１．メニューバーから［挿入－マップ－Google マップ］を選択します。
［Google マップ API キー設定］ダイアログボックスが表示されます。
２．［登録ページをブラウザーで開く］ボタンをクリックします。
Google Maps API に登録するページが表示されます。
３．記述されている手順に従って、API キーを生成します。
４．［Google マップ API キー設定］ダイアログボックスの［Maps API キー］に
API キーを入力、またはコピーしたものを貼り付けます。
５．［OK］ボタンをクリックします。
［地図の挿入 (Google マップ)］ダイアログボックスが表示されます。
６．各項目を設定し、［OK］ボタンをクリックします。
Google マップがページに挿入されます。
７．Google マップをドラッグして好きな場所へ移動します。
Yahoo！地図にアイコンを設定：
Yahoo!地図上の目的地がわかりやすいようにアイコン（印）を付けたり、目的地の住所な
どの情報やコメントを吹き出しで表示させたりすることができます。
１．挿入した Yahoo!地図を選択し、メニューバーから［編集－マップの編集］を選択します。
［地図の挿入 （Yahoo!地図）］ダイアログボックスが表示されます。
２．表示されたダイアログボックスのプレビュー画面に Yahoo!地図が表示されたら、［詳細設定］ボタンを選択します。
［地図の詳細設定 （Yahoo!地図）］ダイアログボックスが表示されます。
＜注意＞
Yahoo!地図が表示される前に［詳細設定］ボタンをクリックすると、アイコンの設定画面
に Yahoo!地図が表示されなくなることがあります。
３．［追加］ボタンを選択します。
［アイコンの設定 （Yahoo!地図）］ダイアログボックスが表示されます。
４．アイコン名を入力します。
＜ヒント＞
アイコン名は Yahoo!地図上に表示されるものではないので、日本語など任意の文字列を
設定することができます。
５．アイコンを設定する場所が地図の中央位置にくるように、地図上をドラッグして調整します。
調整後、［地図の中心位置を取得］ボタンをクリックし、現在の中心位置の経緯と緯度を取得します。
＜ヒント＞
地図欄左上の［＋］、［－］で地図の拡大/縮小表示ができます。
＜注意＞
Yahoo!地図の状況によっては、［アイコンの設定 （Yahoo!地図）］ダイアログボックスで拡大表示を行っても、
プレビューなどでは拡大表示されないことがあります。
その場合は、［地図の挿入 （Yahoo!地図）］ダイアログボックスで地図を拡大してください。
６．アイコンに吹き出し情報を設定します。
［吹き出しの設定］項目の［吹き出しを表示］をオンにします。
＜ヒント＞
吹き出し表示が不要な場合は［OK］ボタンでダイアログボックスを閉じ、アイコンの設定を完了させます。
７．［表示する内容］に、吹き出し内に表示させたい内容を入力します。
＜ヒント＞
［参照］ボタンをクリックし、用意したテキスト ファイルや HTML ファイルを選択することもできます。
［アイコン画像の設定］項目でアイコンの種類を変更することができます。
８．［OK］ボタンで各ダイアログボックスを閉じます。
９．プレビュー画面に切り替えて表示を確認します。
GoogleMapsにMarkerを挿入：
Google マップ上の目的地がわかりやすいようにマーカー（印）を付けたり、目的地の住所などの情報やコメントを吹き出しで表示させたりすることができます。
１． 挿入した Google マップを選択し、メニューバーから［編集－マップの編集］を選択します。
［地図の挿入 （Google マップ）］ダイアログボックスが表示されます。
２． 表示されたダイアログボックスのプレビュー画面に Google マップが表示されたら、［詳細設定］ボタンを選択します。
［地図の詳細設定 （Google マップ）］ダイアログボックスが表示されます。
＜注意＞
Google マップが表示される前に［詳細設定］ボタンをクリックすると、マーカーの設定画面に Google マップが
表示されなくなることがあります。
３．［追加］ボタンを選択します。
［マーカーの設定 （Google マップ）］ダイアログボックスが表示されます。
４．マーカー名を入力します。
＜ヒント＞
マーカー名は Google マップ上に表示されるものではないので、日本語など任意の文字列を設定することができます。
＜注意＞
ここで設定できるマーカー画像は 1種類のみです。マーカー画像そのものやデザインを変更することはできません。
５．マーカーを設定する場所が地図の中央位置にくるように、地図上をドラッグして調整します。
調整後、［地図の中心位置を取得］ボタンをクリックし、現在の中心位置の経緯と緯度を取得します。
＜ヒント＞
ドラッグの操作以外でも、地図欄左上の矢印ボタンを利用し地図の表示位置を調整することができます。
また［＋］ボタン、［－］ボタンで地図の拡大/縮小表示ができます。
＜注意＞
Google マップの状況によっては、［マーカーの設定 （Google マップ）］ダイアログボックスで拡大表示を行っても、
プレビューなどでは拡大表示されないことがあります。
その場合は、［地図の挿入 (Google マップ)］ダイアログボックスで地図を拡大してください。
６．マーカーに吹き出し情報を設定します。
［情報ウィンドウの設定］項目の［情報ウィンド ウを表示］をオンにし、［ウィンドウ出現方法］を選択します。
＜ヒント＞
吹き出し表示が不要な場合は［OK］ボタンでダイアログボックスを閉じ、マーカーの設定を完了させます。
７．［表示する内容］に、吹き出し内に表示させたい内容を入力します。
＜ヒント＞
［参照］ボタンをクリックし、用意したテキスト ファイルや HTML ファイルを選択することもできます。
８．［OK］ボタンで各ダイアログボックスを閉じます。
９．プレビュー画面に切り替えて表示を確認します。
| （A）勉強会 | （B）テーマ詳細 | （C）団欒の時 | 第1日目 | 第２日目 | 第３日目 | 第４日目 |
