プロジェクト実習I/II(2015年度） テーマ「俺（私）の地図」
目標：．Google Maps APIを用いて関心のある情報（例：グルメ地図、観光地図、公共情報、統計データの可視化など）を地図上に表示する。
議論の題材：
(A) 完成品は規模としてどの程度実用的か
追加(2015.12.11)まとめプレゼンテーションの作り方
(B) プログラムとデータを分離したらプログラムの可読性と分業可能性が増したかどうか議論する。今回は、Google Maps APIで表示するデータを表示されるページとは別のファイルに記録することを通じてプログラムとデータの分離を実践する。
(B-補足1)データの形式は、Javascript Object Notation (JSON)の形式のテキストファイルとする。
追加（2015.11.20）JSONについて
(B-補足2)ページを表示するためのJavascriptプログラムからデータには、jQueryライブラリに含まれるAjaxのライブラリなどでアクセスできる。
(C) データの共有を推進するために、GeoJSONデータ形式でデータを表現して、map.data.loadGeoJsonメソッドでアクセスすることも試みてみたか。
(C-補足1)Google Developersの"Data Layer: Simple"に例がある。APIキーを使わずに動作するバージョンを作成してみた（参照）。
(C-補足2)Google文字のポリゴンを表示するデータへのリンクはこちら。
(C-補足3)GeoJSON Format Specificationとその概略の日本語訳
----参考（１）-----
プロジェクト実習I/II(2013年度）必要な資料はここから探すといいでしょう。
追加（2015.11.20）情報ウィンドウ内にストリートビューを表示（ひつじかい氏「ひつじかいの雑記帳」より）
追加（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.
Google Map上にGeoJSONデータを表示する（from "GUMMA GIS GEEK" by 清水正行氏）
----参考（２）-----
一昨年度の作品例
----昨年度のプロジェクト成果物の例-----
----その他の例-----
---$.getJSONによるJSONデータの読み込み--------------
--------------------------------
----参考（３）：Javascriptの基本から位置情報の取得まで-----
Javascript入門（２）：DOMの操作，イベントリスナー
一昨年度のガイドブックも参照のこと。
-------------------------------
----参考（４）：プログラミングの教材ならここ-----
W3schools.com多様なプログラミング言語に対応。スモールステップ。例が豊富。コードを実行できる。
----------------------
個人としての目標
1. Google Map APIを利用したインタラクティブなWebページを作ることができる。
技術の例：地図を表示する。マーカーを地図上に表示する。マーカーにウィンドウを付けることができる。マーカー群を消すことができる。
2. JavascriptとjQueryを用いてインタラクティブなWebページを作ることができる。
技術の例：DOM要素の操作。イベントリスナー
3. JSONを用いてデータとプログラムを分離する
技術の例：Ajaxを用いたファイルの読み込み
班の目標
1. 意味のある問題設定とインパクトのある実現方法
2．生産性の向上：分業と集中
3. 楽しく仕事をする工夫
4. 互いに成長を助ける
実習の主な内容
趣旨説明、班分け、班ごとにフリータイム（自己紹介など）
いくつかの技術的問題の指摘
各班で分担を決めて情報収集と制作を行う。最後に進捗を発表。
１．地図の表示：基本的な事項（Google Maps JavaScript API v3デベロッパーガイド「スタートガイド」より）。ただし、今回はAPIキーは用いない。
２．マーカーは"オーバーレイ"の一種である（参考：マーカー）。オーバーレイには他にシンボル、ポリライン、ポリゴン、円と矩形、情報ウィンドウ、グラウンドオーバーレイ、カスタムオーバーレイ、がある。（参考：オーバーレイの概要）
３．マーカー群を一度に消すには、マーカーを生成した時に配列に格納しておく必要がある。消すときは配列の要素ひとつひとつに対してsetMap(null)メソッドを実行する。（参考：千葉県のスポーツクラブ一覧）
jQueryの利用、Ajaxを用いたJSON形式のテキストファイルの読み込み、文字列検索についてもこの例を参考のひとつに。
４．クリック等のイベントにオブジェクトを反応させるためには、対象がマップ上のオブジェクト（マップやマーカー）なのか、その他のDOM要素なのかで、使うメソッドが違う。
マップ上のオブジェクトに対しては、google.maps.event.addListnerメソッドを使う（昨年度のガイドブック参照）。DOM要素に対しては、Javascript HTML DOMや上記Javascript入門（２）を参照。
５．JSON形式のテキストファイルの読み込みについて、一昨年度のガイドブックを改訂すべきところ、まだしていない。サンプルプログラムとして上記千葉県のスポーツクラブ一覧を参考にしてほしい。
その他参考情報
１．ローカルコンピュータ上の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 を使用すればよいですか？」を見よ。）