プロジェクト実習I/II(2017年度） テーマ「Google Maps APIの活用」
目標：Google Maps APIを用いて関心のある情報（例：グルメ地図、観光地図、公共情報、統計データの可視化など）を地図上に表示する。
2017.9.22
１．班分け
２．個人の環境整備（毎回）
ブラウザはFirefoxを使うこと。デベロッパーツールの使い方に慣れること。
ファイルをPCに残さないこと（消える）。
３．作品例
2013年度の作品例
----その他の例-----
----統計データの表示----
４．初歩のGoogle Maps API利用
Google Maps API入門（２）：ポリゴンを描く。ポリゴンの内外判定。マーカーアイコンの変更
Google Maps API入門（３）：GeoJSONデータの表示
追加（2017/12/08)
クリックした場所にマーカーを置く。円を描く。マーカーを一度に消す。div要素を上下に揃える（例）
追加（2017/12/08)
GeoJSONデータから表示したマーカーをクリックイベントに反応させたい
解決策１：ダミーマーカーの導入（例（クリックするとインフォウィンドウを表示））
追加（2017/12/15）
解決策２：google.maps.Mapクラスだけでなくgoogle.maps.Dataクラスにもイベントを定義することが可能である(Google Maps API Referenceの Data classの項見よ)。
そしてfeatureはeventオブジェクトのプロパティでもある。Dataクラスのイベントオブジェクトのうち、click, mouseover, rightclick等はgoogle.maps.Data.MouseEventを拡張したものである。Data.MouseEventのプロパティにfeatureがある。Google Maps API referenceのData.MouseEvent object specificationを見よ。
Data LayerのAdd Event Handlersの項でのコーディング例を見よ。
google.maps.Dataクラスは前述のようにイベントを定義することが可能であるだけでなく、addListenerメソッドも持っている。このメソッドはMVCObjectクラスから継承している。（Google Maps API reference: Data classの項を見よ
これらを踏まえてプログラム例の80〜92行目を参考にせよ。
この例ではforEachメソッドの使用例も示した（66〜79行目）。
５．まとめプレゼンテーションについて
６．プロジェクトの目標
個人としての目標
1. Google Map APIを利用したインタラクティブなWebページを作ることができる。
技術の例：地図を表示する。マーカーを地図上に表示する。マーカーにウィンドウを付けることができる。マーカー群を消すことができる。
2. JavascriptとjQueryを用いてインタラクティブなWebページを作ることができる。
技術の例：DOM要素の操作。イベントリスナー
3. JSONを用いてデータとプログラムを分離する
技術の例：コールバック関数を用いた非同期なファイルの読み込みと同期が必要な場合の手段
班の目標
1. 意味のある問題設定とインパクトのある実現方法
2．生産性の向上：分業と集中
3. 楽しく仕事をする工夫
4. 互いに成長を助ける
----参考（１）-----
プロジェクト実習I/II(2013年度）必要な資料はここから探すといいでしょう。
追加（2015.11.20）情報ウィンドウ内にストリートビューを表示（ひつじかい氏「ひつじかいの雑記帳」より）
追加（2016.09.30）ポリゴンを描く（例：３つの地点）。JSONファイルはここ。
追加（2015.11.20）Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)（Syncerより）
Code SamplesAll of the examples contained in the Google Maps JavaScript API documentation set are listed below for quick reference.
追加（2017.9.29）多色マーカーの提供
http://hishikilab.sakura.ne.jp/marker/ に、次のアイコンを置きましたので利用してください。
m_blu.png
m_cya.png
m_gre.png
m_ore.png
m_pin.png
m_pur.png
m_red.png
m_yel.png
追加（2017.10.6）ポリゴンの内外の判定
----参考（２）：Javascriptの基本から位置情報の取得まで-----
Javascript入門（２）：DOMの操作，イベントリスナー
2013年度のガイドブックも参照のこと。
-------------------------------
----参考（３）：プログラミングの教材ならここ-----
W3schools.com多様なプログラミング言語に対応。スモールステップ。例が豊富。コードを実行できる。
----------------------
その他参考情報
１．ローカルコンピュータ上のHTMLファイルに含まれるJavascriptプログラムを実行するには、Firefoxを使うとよい。
２．デバッグのために。設定した変数をチェックしたいときどうするか？
(a) Firefoxの開発ツールを利用
console.log(変数);で変数をコンソールに書きだすことができる。F12ボタンで開発ツールを立ち上げ、コンソールを選択する。
参考：JavaScript Output（「Writing to The Console」を見よ。）
(b) alert(変数);でポップアップウィンドウに変数の値を表示できる。
３．Google Maps APIキーについて
" Google Maps JavaScript API V3 および Maps Image API は、以前は API コンソール キーを必要としていませんでした。下位互換性を確保するために、これは維持されますが、今後、新しいアプリケーションではおすすめできません。" （よくある質問の「各マップ サービスでは、それぞれどのキーまたは ID を使用すればよいですか？」を見よ。）