プロジェクト実習I/II(2016年度) テーマ「俺(私)の地図」

目標:.Google Maps APIを用いて関心のある情報(例:グルメ地図、観光地図、公共情報、統計データの可視化など)を地図上に表示する。

議論の題材:

(A) 完成品は規模としてどの程度実用的か

まとめプレゼンテーションの作り方

(B) プログラムとデータを分離したらプログラムの可読性と分業可能性が増したかどうか議論する。今回は、Google Maps APIで表示するデータを表示されるページとは別のファイルに記録することを通じてプログラムとデータの分離を実践する。

なお、データの形式は、Javascript Object Notation (JSON)の形式のテキストファイルとする。

参考:JSONについて

(補足1)Google Developersの"Data Layer: Simple"に例がある。APIキーを使わずに動作するバージョンを作成してみた(参照)。

(補足2)Google文字のポリゴンを表示するデータへのリンクはこちら

(C-補足3)GeoJSON Format Specificationとその概略の日本語訳

----参考(1)-----

プロジェクト実習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.

----参考(2)-----

2013年度の作品例

アニメの聖地マップ

大学周辺の飲食店

船橋市防災マップ

駐車場マップ

富士山登山ルート

----その他の例-----

習志野キャンパス周辺のWi-fiスポット検索

東京ディスニーランドマップ

世界遺産マップ

千葉県のスポーツクラブ

山手線各駅の待ち合わせ場所

---$.getJSONによるJSONデータの読み込み--------------

二次医療圏の検索(病院数、病床数、医師数などで)

千葉県市町村別犯罪件数推移(2014年10月〜12月)

--------------------------------

----参考(3):Javascriptの基本から位置情報の取得まで-----

Javascript入門(1)

Javascript入門(2):DOMの操作,イベントリスナー

Google Maps API入門:現在地の住所の取得

2013年度のガイドブックも参照のこと。

-------------------------------

----参考(4):プログラミングの教材ならここ-----

W3schools.com多様なプログラミング言語に対応。スモールステップ。例が豊富。コードを実行できる。

----------------------

----参考(5)プログラミング方法の概要を新規作成しました--------

情報整理のためのGoogle Map API入門 (MSパワーポイントファイルはこちら)

追加(2016.09.30)

ポリゴンを描く(例:3つの地点)。JSONファイルはここ

個人としての目標

1. Google Map APIを利用したインタラクティブなWebページを作ることができる。

技術の例:地図を表示する。マーカーを地図上に表示する。マーカーにウィンドウを付けることができる。マーカー群を消すことができる。

2. JavascriptとjQueryを用いてインタラクティブなWebページを作ることができる。

技術の例:DOM要素の操作。イベントリスナー

3. JSONを用いてデータとプログラムを分離する

技術の例:Ajaxを用いたファイルの読み込み

班の目標

1. 意味のある問題設定とインパクトのある実現方法

2.生産性の向上:分業と集中

3. 楽しく仕事をする工夫

4. 互いに成長を助ける

実習の主な内容

趣旨説明、班分け、班ごとにフリータイム(自己紹介など)

いくつかの技術的問題の指摘

各班で分担を決めて情報収集と制作を行う。最後に進捗を発表。

1.地図の表示:基本的な事項(Google Maps JavaScript API v3デベロッパーガイド「スタートガイド」より)。ただし、今回はAPIキーは用いない。

2.マーカーは"オーバーレイ"の一種である(参考:マーカー)。オーバーレイには他にシンボル、ポリライン、ポリゴン、円と矩形、情報ウィンドウ、グラウンドオーバーレイ、カスタムオーバーレイ、がある。(参考:オーバーレイの概要

3.マーカー群を一度に消すには、マーカーを生成した時に配列に格納しておく必要がある。消すときは配列の要素ひとつひとつに対してsetMap(null)メソッドを実行する。(参考:千葉県のスポーツクラブ一覧

jQueryの利用、Ajaxを用いたJSON形式のテキストファイルの読み込み、文字列検索についてもこの例を参考のひとつに。

4.クリック等のイベントにオブジェクトを反応させるためには、対象がマップ上のオブジェクト(マップやマーカー)なのか、その他のDOM要素なのかで、使うメソッドが違う。

マップ上のオブジェクトに対しては、google.maps.event.addListnerメソッドを使う(昨年度のガイドブック参照)。DOM要素に対しては、Javascript HTML DOMや上記Javascript入門(2)を参照。

5.JSON形式のテキストファイルの読み込みについて、一昨年度のガイドブックを改訂すべきところ、まだしていない。サンプルプログラムとして上記千葉県のスポーツクラブ一覧を参考にしてほしい。

その他参考情報

1.ローカルコンピュータ上のHTMLファイルに含まれるJavascriptプログラムを実行するには、Firefoxを使うとよい。

2.デバッグのために。設定した変数をチェックしたいときどうするか?

(a) Firefoxの開発ツールを利用

console.log(変数);で変数をコンソールに書きだすことができる。F12ボタンで開発ツールを立ち上げ、コンソールを選択する。

参考:JavaScript Output(「Writing to The Console」を見よ。)

(b) alert(変数);でポップアップウィンドウに変数の値を表示できる。

参考:Window alert() Method

3.Google Maps APIキーについて

" Google Maps JavaScript API V3 および Maps Image API は、以前は API コンソール キーを必要としていませんでした。下位互換性を確保するために、これは維持されますが、今後、新しいアプリケーションではおすすめできません。" (よくある質問の「各マップ サービスでは、それぞれどのキーまたは ID を使用すればよいですか?」を見よ。)