Part4 Google Maps APIとJavascriptをはじめよう! オリエンテーションワークショップ WebサービスAPI 勉 強 会 1
今 回 の 勉 強 会 で 事 前 に 準 備 しておくもの Google Maps APIキーを 取 得 します ローカルとサーバー 上 に 上 げて 使 うのと 別 々のキーが 必 要 となります また Adsenseをご 利 用 される 方 は プロパティ 情 報 からご 自 身 のコードをメモしておいてください Google Maps API に 登 録 する http://code.google.com/intl/ja/apis/maps/signup.html 勉 強 会 で 必 要 なAPIキーなどを 準 備 します Google Mapa APIキー 取 得 実 際 に 開 発 するときのためにGoogle Maps API キーにサイトを 登 録 してキーを 取 得 します ローカル 用 (http://localhost/)と 公 開 用 (テストサーバー ご 自 身 のサイト ブログ)のキーの2 種 類 を 取 得 してお いてください 今 回 はローカル 用 のみ 使 用 します GoogleAdseseアカウント 情 報 Google Adsense 広 告 表 示 用 ID 取 得 Adsenseを 利 用 される 方 は 管 理 画 面 のアカウント 情 報 プロパティ 情 報 から コンテンツ 向 け Adsense と 検 索 向 けAdsense のご 自 身 のIDをメ モっておいてください 2
サンプルファイルの 構 成 今 回 のサンプルファイルは1ファイルだけです Part.4フォルダ C: xampp htdocs part4 http://localhost/part4/ 基 本 的 にworkフォルダで 作 業 しますが 途 中 で 分 からなくなった 場 合 はbackupフォルダから 最 初 の 状 態 のファイルを 復 旧 させます backupフォルダにはworkフォルダ 初 期 のものと まったく 同 じものが 入 っています workフォルダ C: xampp htdocs part4 work http://localhost/part4/work/ workフォルダ 内 の map.phpを 修 正 しながら 表 示 を 確 認 し 学 習 を 進 めていきます backupフォルダ C: xampp htdocs part4 work http://localhost/part4/work/ 3
今 回 の 勉 強 会 で 出 来 ること Google Maps APIのみで( 今 までやってきたPHPを 一 切 使 わず) 地 図 を 描 画 するためのあらゆる 方 法 を 学 びま す Javascriptのみを 修 正 しながら 進 めます 今 回 の 勉 強 会 では 地 図 の 作 成 に 特 化 します そ のため 宿 情 報 レストラン 情 報 等 との 連 動 はありま せんが 地 図 を 描 くことに 先 に 慣 れておくことによっ て 連 動 させるときにスムーズに 作 成 できることを 目 指 します ( 一 度 PHPを 忘 れて JavascriptとGoogle Maps API に 特 化 して 慣 れていきます) 指 定 した 緯 度 経 度 での 地 図 の 表 示 ズームなどコントローラーの 追 加 マーカーの 表 示 オリジナルアイコン 画 像 で 表 示 Adsense 広 告 (2 種 )をオーバーレイで 表 示 ストリートビュー 表 示 ルート 案 内 表 示 ( 車 徒 歩 ) 4
1 時 間 目 緯 度 経 度 とGOOGLE MAPS API 入 門 5
緯 度 経 度 とは? 緯 度 経 度 は 普 段 の 生 活 では 気 にすることがない 人 間 は 住 所 で 場 所 を 特 定 できるため ただし 地 図 上 で 場 所 を 示 すときは 地 球 という 天 体 上 の 座 標 を 知 ることで 機 械 的 且 つ 正 確 に 場 所 を 特 定 することができる 緯 度 latitude よく 使 われる 変 数 名 lat 経 度 longitude よく 使 われる 変 数 名 lng また は lon 緯 度 (latitude) 経 度 (longitude)とは 天 体 上 の 位 置 を 示 す 座 標 のことである 緯 度 経 度 さえあれば 地 球 上 のあらゆる 地 点 を 正 確 に 機 械 的 に 特 定 することができる これから 扱 う Google Maps APIでは 主 に 緯 度 経 度 を 指 定 して 地 図 を 表 示 したり アイコンを 表 示 させたりします 緯 度 経 度 とひとくくりにして 説 明 したり あらゆる サイトで 書 かれていますが 不 慣 れなうちは 緯 度 と 経 度 を 逆 に 記 してしまい 海 しかない 地 図 が 表 示 さ れたり うまく 表 示 されない 不 具 合 があります 英 単 語 が 苦 手 な 方 は 緯 度 はlat 経 度 はlng と 暗 記 しておくと 間 違 いにくいでしょう 南 北 の 軸 (y 軸 ) 東 西 の 軸 (x 軸 ) 参 考 : 日 本 の 緯 度 経 度 一 覧 http://ja.wikipedia.org/wiki/%e6%97%a5%e6%9c%ac %E3%81%AE%E7%B7%AF%E5%BA%A6%E7%B5%8C%E5% BA%A6%E4%B8%80%E8%A6%A7 6
世 界 測 地 系 と 今 日 は 使 わない 日 本 測 地 系 世 界 測 地 系 と 日 本 測 地 系 が 過 去 にあり 現 在 もその 名 残 りが 残 っています 現 在 は 世 界 測 地 系 に 統 一 され ています しかし 一 部 APIとやり 取 りするのに 日 本 測 地 系 に 変 換 する 必 要 があります 3 日 本 測 地 系 と 世 界 測 地 系 国 土 地 理 院 http://www.gsi.go.jp/law/g2000-g2000-h3.htm より 引 用 : 過 去 に 日 本 で 使 われていた 日 本 測 地 系 という 基 準 がありますが 現 在 は 世 界 測 地 系 に 統 一 されて います APIによっては 世 界 測 地 系 でも 扱 えるように なったものも 増 えていますが 対 応 していないところ もあります その 場 合 は 変 換 式 を 用 いて 計 算 し その 測 地 系 に 合 うように 変 換 します 本 日 は 世 界 測 地 系 のみで 話 を 進 めます なお 測 地 系 以 外 に 単 位 が 違 うという 問 題 もありま すが 今 日 は 変 換 等 は 特 に 行 わない 範 囲 で 進 めま す 日 本 測 地 系 明 治 時 代 に 東 京 天 文 台 を 基 準 に 定 められた 世 界 測 地 系 衛 星 などを 用 いて 地 球 の 形 状 など 明 らかにし 世 界 的 な 整 合 性 をもって 構 築 された 国 際 的 に 定 められている 法 改 正 により 世 界 測 地 系 への 移 行 が 進 んでいる 7
Google Maps APIを 扱 うにあたってのJavascript 結 論 から 言 えば まずブログパーツやアクセス 解 析 用 のタグと 同 じようにコピペして 表 示 するところから 始 め ます それから Javascriptのタグをコピペ パラメータや 変 数 を いじりながら 少 しずつ 覚 えていく 最 初 のルールとしては Javascript 内 はPHPと 同 じ く 原 則 半 角 英 数 字 半 角 スペース タブのみで 記 述 す ることです 特 に 他 のAPI+PHPプログラムと 組 み 合 わせると きは 特 にUTF-8(BOM 無 し)+ 改 行 コードLFで 設 定 す る 必 要 があります 今 までやってきたPHPと 同 じよう にEmEditorなどそれらが 設 定 可 能 なテキストエディ タで 編 集 してください PHP と 同 じ 部 分 // 同 じ 行 内 のこの 記 号 の 後 はすべてコメントとして 扱 われる 行 ( 命 令 文 )の 最 後 に ;( 半 角 ) をつける ただし if 文 function 文 など { や } に 囲 まれ る 部 分 を 持 っているものは ; つけない 半 角 英 数 字 スペース タブが 基 本 ( 文 字 出 力 コメント 以 外 ) 全 角 スペー スに 注 意 8
HTML 全 体 Google Maps APIで 地 図 を 表 示 するHTML 全 体 像 HTML 冒 頭 の<head>タグ 内 にGoogle Maps APIを 呼 び 出 すJavascriptを 書 き 地 図 を 表 示 させるところを <body>タグ 内 にdivタグで 指 定 します 1 Google Maps API を 呼 び 出 すscript 正 確 にはWebページを 表 示 したときに Javascript の 関 数 を 呼 び 出 す 処 理 をしています その JavascriptからGoogle Maps APを 使 って 地 図 などの 画 像 を 呼 び 出 しています <head>タグ 内 2 どんな 地 図 を 描 く のかの 設 定 js g_map = new GMap2(document.getElementById ("map_canvas")); <body>タグ 内 地 図 を 表 示 させる 場 所 とサイズの 指 定 <div id="map_canvas" style="width: 640px; height: 480px;margin: 20px auto;float:left;"></div> 9
JavascriptはユーザーのPCブラウザで 実 行 される マッシュアップ 時 にPHPで 処 理 してからJavascriptで 地 図 データを 表 示 するという 流 れを 理 解 しておく 例 :Google Maps 例 : 楽 天 トラベル API 他 のサーバーやAPIなど(インターネット) API 6APIからレスポンス 5APIへリクエスト 3APIからレスポンス 2APIへリクエスト 1サーバーへリクエスト PCブラウザ 実 行 4HTML(Javascript 等 含 む) サーバ 実 行 Javascript HTML PHP クライアントサイドプログラム Javascript CSS サーバーサイドプログラム 10
今 回 のサンプルファイルについて 今 日 のサンプルファイルはひとつです 勉 強 会 で 使 用 するJavascript 文 はコメントアウトの 形 で 記 述 していま す // を 削 除 してコメントアウトを 解 除 しただけで 機 能 を 追 加 できるようにしています 実 行 される 今 回 のサンプルファイルは1ファイルだけで 設 定 ファイルも 不 要 です またコピペするプログラムも 用 意 しておりません コメントアウトされている 部 分 を 解 除 することによっ て 機 能 が 追 加 されて 動 くように 設 計 されています つまり 今 回 はプログラミングをしていくわけでは ありません コピペ& 書 き 換 えを 少 しずつやって 理 解 していくというやり 方 です コメントアウト 状 態 ( 実 行 されない) EmEditorで 見 た 場 合 緑 色 がコメントアウト 部 分 で あり 緑 色 になる 部 分 はJavascriptエンジンに 解 釈 さ れない コピペしたり 手 入 力 したりする 必 要 が 内 容 にあらか じめ 必 要 なJavascriptはコメントとして 書 き 込 んであ り コメントアウトしてあるので 緑 色 で 表 示 されてい る コメントアウトを 解 除 すると 普 通 の 色 になり Javascriptとして 実 行 されることになります 11
コメントについて JavascriptとPHPのコメントの 記 法 についてはほぼ 同 じなので それを 改 めて 復 習 して どういうときに 使 うか // 一 行 の 場 合 のコメントアウト 今 日 は 基 本 的 に 一 行 の 場 合 のコメント 記 法 しか 使 っていません /* 1 行 目 : 複 数 行 の 場 合 のコメントアウト 2 行 目 : 複 数 行 の 場 合 のコメントアウト */ PHPやJavascript 文 章 中 に 自 分 のメモ 用 にコメント しておきたい 場 合 があります HTMLの 場 合 はコメン トタグでそれを 書 いてきましたが JavascriptやPHP 内 ではそれを 理 解 できません PHPやJavascriptでは 左 記 のような 形 式 でコメント を 表 記 します また 一 部 のソースや 関 数 群 などを 動 かないよう にコメント 化 したりしますがそれをコメントアウトと 言 います コメントアウトとは コメントにするということ です 主 に 書 きかけのプログラムの 一 部 を 動 作 確 認 のた めに 一 時 的 に 無 効 にして 新 しいコードを 試 したりす るときに 使 います 消 してしまうより コメントアウトし たほうが 書 き 直 す 手 間 が 省 けます 同 時 にミスも 減 らせます PHP 対 応 テキストエディタではコメントアウト 部 分 が 緑 色 など 配 色 されているのでわかりやすいです 12
早 速 カスタマイズしてみよう! 地 図 で 使 いたい 部 品 パーツはJavascriptで1 行 追 記 するだけで 使 える どのように 追 記 するか 確 認 してみよ う 最 初 は 何 もコントロール 要 素 の 無 い 地 図 です サンプルコードに 下 記 記 述 をコメントアウト(//を 付 けて 無 効 化 )してある // を 削 除 して 下 記 機 能 を 有 効 にする 一 個 ずつ 有 効 にしてみたり 複 数 の 組 み 合 わせで 試 してみましょう 拡 大 縮 小 のコントローラーを 追 加 g_map.addcontrol(new GSmallMapControl()); 拡 大 縮 小 のコントローラーを 追 加 (ズームつまみ 付 き) g_map.addcontrol(new GLargeMapControl()); 地 図 種 類 コントロールボタンを 追 加 g_map.addcontrol(new GMapTypeControl()); 尺 度 定 規 の 表 示 g_map.addcontrol(new GScaleControl()); ワーク 制 限 時 間 3 分 参 考 Google Maps API の 例 http://code.google.com/intl/ja/apis/maps/documentation/examples/ Javascriptなので ソースを 見 れば 使 い 方 がわかる 自 分 で 表 示 項 目 をコントロールできるということを 覚 えておく 13
自 分 の 好 きな 場 所 の 緯 度 経 度 を 知 る 自 分 の 好 きな 場 所 の 緯 度 経 度 を 知 る 方 法 はいくつかありますが ここではGoogle Mapsで 調 べる 方 法 をご 案 内 します 特 定 の 場 所 に 緯 度 経 度 を 調 べるにはいくつかの サイトやサービスがあります また その 方 法 もいく つかあるのですが 今 回 は 素 早 く 場 所 を 検 索 できて 簡 単 に 緯 度 経 度 を 知 ることができるGoogle Mapsの 機 能 を 追 加 います Google マップで 緯 度 経 度 を 知 りたい 場 所 を 右 ク リックして この 場 所 について を 選 択 します この 緯 度 経 度 を 知 ることができれば 現 在 作 業 中 のサンプルの 緯 度 経 度 を 書 き 換 えて 自 分 の 好 きな 場 所 の 地 図 を 表 示 することができます 自 分 が 知 っ ている 場 所 のほうが 地 図 のカスタマイズに 意 欲 が 湧 いたり ミスに 気 づきやすくなったりします するとGoogle マップの 検 索 窓 に 緯 度 経 度 の 数 字 が 入 ります カンマ 区 切 りで 前 半 が 緯 度 後 半 が 経 度 です 14
地 図 の 中 央 にマーカー 表 示 地 図 の 中 央 の 緯 度 経 度 = 地 図 表 示 で 指 定 した 緯 度 経 度 マーカーは 地 図 の 上 にオーバーレイ( 地 図 の 上 に 重 ねて)で 表 示 させます 地 図 の 緯 度 経 度 を 指 定 しているところから // 地 図 を 表 示 する 緯 度 経 度 を 指 定 する var pos = new GLatLng("35.69109","139.764887"); pos という 変 数 に 地 図 の 中 心 地 の 緯 度 経 度 情 報 が 格 納 されている それを 利 用 して マーカーを 表 示 する 緯 度 経 度 を 指 定 する // マーカーを 表 示 する var marker = new GMarker(pos); g_map.addoverlay(marker); ワーク 制 限 時 間 1 分 前 ページと 同 様 に 文 法 にある2 行 分 のコメントを 外 してマーカーを 表 示 させてください 15
Javascriptの 変 数 について Javascriptの 変 数 はPHPと 異 なり $ が 頭 につかない var name= tarou ; 今 回 のサンプルソースで 使 われている 変 数 g_map 地 図 表 示 用 変 数 pos 地 図 を 表 示 する 緯 度 経 度 ( 地 図 の 中 心 地 ) mapoptions 検 索 Adsense 設 定 用 html 情 報 ウィンドウを 表 示 するときのHTML 文 字 列 が 代 入 される icon アイコン 作 成 用 変 数 変 数 には 文 字 列 や 数 値 などを 入 れることができる 変 数 を 使 うときにvarと 明 示 的 に 記 すことが 多 いが 省 略 することも 可 能 変 数 名 には 大 文 字 小 文 字 の 半 角 アルファベット が 使 用 できるが 予 約 語 (プログラムの 文 法 に 出 てき そうな 言 葉 など)は 使 用 できません 詳 細 はJavascriptレファレンスを 参 考 にしてくださ い ほかのサイトのサンプルなどではmapとかlatlngと か 違 う 変 数 などが 使 われていることが 多 い このサ ンプルに 追 記 で 組 み 込 むときは 変 数 名 の 書 き 換 え をしないと 動 かない 16
情 報 ウィンドウ( 吹 き 出 し)の 表 示 情 報 ウィンドウもJavascript1 行 で 実 現 吹 き 出 し 内 はHTMLで 表 示 させることもできる 情 報 ウィンドウの 表 示 g_map.openinfowindowhtml(g_map.getcenter(), 文 字 列 ); ここの 文 字 列 にHTMLタグが 入 れられる リンク 画 像 etc getcenter() 地 図 の 中 心 地 点 の 地 理 座 標 ( 緯 度 経 度 )を 返 します ワーク 制 限 時 間 3 分 Check! 地 図 上 の 吹 き 出 しにリンクを 仕 込 むことも 可 能 つまり 吹 き 出 しの 中 にHTMLタグで 情 報 を 入 れてみて 表 示 させてみよう( 上 記 サンプル 修 正 ワーク) 適 当 なところで<br />タグを 入 れないと 吹 き 出 しが 横 に 長 くなりすぎます 写 真 を 表 示 するimgタグなんかもアリ! 17
複 数 地 点 にマーカーを 表 示 させる 複 数 地 点 を 示 すことによって 地 図 上 でそれぞれの 位 置 関 係 を 示 すことが 可 能 (APIで 近 くの 店 10 件 検 索 する など) 1. Geocodingなどでマーカー 表 示 させたい 場 所 の 緯 度 経 度 を 調 べる( 住 所 や 施 設 名 ) 2.Javascript 中 にその 緯 度 経 度 でマーカーを 表 示 す る 記 述 を 追 記 する(2 行 ) var marker = new GMarker(new GLatLng(35.67224, 139.766671)); g_map.addoverlay(marker); ワーク 制 限 時 間 3 分 参 考 Geocoding - 住 所 から 緯 度 経 度 を 検 索 http://www.geocoding.jp/ 3か 所 ぐらい 表 示 してみましょう 地 図 の 範 囲 外 を 指 定 した 場 合 は 縮 尺 を 調 整 して 確 認 してみましょう( 神 田 とロンドンとか ) 参 考 サルでも 出 来 るGoogleMaps (グーグルマップ)API 複 数 のマーカー を 表 示 させる http://sarugooglemaps.blog99.fc2.co m/blog-entry-12.html 18
マーカーをオリジナルアイコンにする1 Googleのマーカーではなくオリジナリティを 出 すためにも オリジナルアイコンでマーカーを 表 示 させてみま しょう 1まず アイコン 作 成 もしくは 素 材 集 などからフ リーアイコンをダウンロードします 余 裕 がなければ 勉 強 会 に 用 に 用 意 してあるアイコ ンを 使 いましょう 透 過 GIFでアイコンを 作 成 しておく と 良 いです /part4/work/images/star.gif 2シャドウメーカーを 使 いアイコンの 影 を 生 成 してお く(via idea*idea) http://www.cycloloco.com/shadowmaker/shadowm aker.htm 3オリジナル 画 像 とシャドウ 画 像 を /part4/work/images/star.gif と 同 じ 階 層 に 保 存 します( 画 像 の 上 で 右 クリック 名 前 を 付 けて 保 存 ) 合 成 されている 画 像 は 不 要 です 19
マーカーをオリジナルアイコンにする2 前 ページで 作 ったアイコンとシャドウアイコンを 表 示 させます そのサイトで 出 力 されたソースをもとにどこを 修 正 して 今 のサンプルソースに 反 映 しているか 解 説 します シャドウメーカーで 出 力 されたコードをもとに 実 際 に 地 図 に 表 示 させてみます 画 像 保 存 場 所 今 回 のサンプルソースの 場 合 はあらかじめ 左 記 の 記 述 があります それを 外 して 元 からあったマー カー 表 示 部 分 をコメントアウトしておきます 緯 度 経 度 画 像 サイズや 表 示 位 置 なども 数 値 で 指 定 している なお アイコン 表 示 するためのロジックはシャドウ メーカーから 吐 き 出 されたスクリプトのように 関 数 化 しておくのが 望 ましい ワーク 制 限 時 間 5 分 実 際 に 参 考 にしてアイコンを 作 成 して 表 示 させて みましょう 20
2 時 間 目 GOOGLE MAPS API 応 用 ワザ 21
住 所 から 地 図 を 表 示 させる(ジオコーディング 機 能 ) 緯 度 経 度 がわからなくても 住 所 駅 名 施 設 名 などでAPIへリクエストして 地 図 を 表 示 させることができる 一 瞬 今 までの 地 図 が 表 示 され るが 指 定 した 住 所 の 位 置 へ 移 動 する 神 田 に 移 動 する と 星 アイコンは 表 示 されている 参 考 ジオコーディングサンプル http://www.marlin-arms.com/support/gmh2/hack22-geocoding.html 住 所 だけでなく 駅 名 や 施 設 名 などでも 地 図 を 表 示 できる 参 考 ジオコーディング 事 例 http://code.google.com/intl/ja/apis/maps/documentation/examples/ 事 前 に 情 報 ウインドウは 無 効 にする 1. 住 所 文 字 列 を 変 数 に 代 入 ( 将 来 的 にはGETで 受 け 取 るとかAPIで 住 所 を 受 け 取 るなどの 処 理 をここで 行 う) 例 : 東 京 都 中 央 区 日 本 橋 2-3-6 2.Javascript 中 にPHPでその 住 所 を 出 力 ワーク 制 限 時 間 5 分 1 自 宅 や 勤 務 先 の 住 所 をサンプルソース 内 に 書 い て 表 示 させてみよう 2 駅 の 名 前 を 入 れて 表 示 させてみよう 銀 座 駅 3 東 京 ドーム と 固 有 の 名 前 で 入 力 して 表 示 させて みよう Google Maps APIのジオコーディング 機 能 に 登 録 されていない 施 設 は 出 てきません 22
ルート 案 内 を 作 る( 車 ) ルート 案 内 を 使 えばお 店 やホテルまでの 経 路 もわずかな 手 順 で 表 示 することができる!(2009/6/19~) 下 記 をJavascript 部 分 に 追 記 directionspanel = document.getelementbyid("route"); directions = new GDirections(g_map, directionspanel); directions.load("from: 銀 座 to: 東 京 ディズニーラン ド", { locale: "ja_jp" } ); 下 記 をHTML 部 分 に 追 記 < div id="route" style="overflow: scroll; width: 400px;height: 250px;"></div> 参 考 Google Japan Blog: ルート 案 内 API が 日 本 でも 使 えるようになりました http://googlejapan.blogspot.com/2009/06/api.html GoogleMapsAPIの 新 機 能 ルート 検 索 機 能 を 試 してみる http://blog.asial.co.jp/582/ Google Maps APIが 国 内 のルート 案 内 に 対 応! わずかなコードでルート 案 内 が http://journal.mycom.co.jp/articles/2009/06/24/googlemaps/index.html ワーク 出 発 地 行 先 を 書 き 変 えてみて 表 示 を 確 認 してみる 途 中 にとおるポイント( 交 差 点 )などをクリックしてみ る 現 時 点 では 公 共 機 関 モードは 提 供 されていません 制 限 時 間 3 分 23
ルート 案 内 を 作 る( 徒 歩 ) デフォルトではドライブルート 案 内 だが 2009 年 12 月 より 徒 歩 でのルート 案 内 が 可 能 になりました ストリートビューと 組 み 合 わせれば 散 歩 シミュレーターのようなものも 作 れるかもしれない 前 ページのソースに travelmode: G_TRAVEL_MODE_WALKING を 加 えるだけで 徒 歩 でのルート 案 内 を 表 示 することができる サンプルコードにはすでにコメントアウト 状 態 で 書 き 込 まれているので それを 解 除 して 実 行 させること ができます( 以 前 の 道 案 内 の 行 はコメントアウトす る) 最 寄 駅 からホテルまでの 徒 歩 経 路 案 内 などに 利 用 できそうです 銀 座 から 東 京 ディズ ニーランドまで 歩 いて いくと2 時 間 47 分 かか ることがわかる 詳 細 な 道 順 までわかる ワーク 制 限 時 間 3 分 出 発 地 行 先 を 書 き 変 えてみて 表 示 を 確 認 してみる 途 中 にとおるポイント( 交 差 点 )などをクリックしてみ る 24
Adsense Google Barに 設 定 する 場 合 Adsense Google Barを 用 いて ユーザーに 地 域 名 を 入 れて 検 索 させる その 検 索 結 果 画 面 (その 地 域 に 遷 移 )に 地 域 に 応 じた 広 告 を 表 示 させることが 可 能 になる GoogleBar は 数 行 のコードを 追 加 するだけで Google Maps API を 用 いた 地 図 に 地 域 検 索 バーを 追 加 する 機 能 です これを 利 用 してその 地 域 名 に 適 したAdsense 広 告 を 表 示 します 左 記 コメントアウト 部 分 を 解 除 して 左 記 最 後 の1 行 をコメントアウトしてください また client: "partner-pub-50000000000000", の 部 分 にご 自 身 の 検 索 向 け AdSenseにコードを 入 れてください (Adsense 管 理 画 面 アカウント 情 報 プロパティ 情 報 ) 参 考 :Google Maps API( 英 語 )でのAdsenseレファレンス http://code.google.com/intl/en/apis/maps/documentation/services.html#advertising 25
Adsense Maps Ad Unitを 使 う 場 合 前 のページのGoogle Barの 場 合 は 検 索 されたキーワードに 応 じての 広 告 だが Maps Ad Unitの 場 合 は 表 示 している 地 図 地 域 に 応 じて 動 的 に 切 り 替 わる 広 告 です Maps Ad Unit は 表 示 されている 地 域 に 合 わせた 広 告 を 表 示 する 機 能 です この 機 能 を 追 加 すること で ユーザーが 地 図 の 移 動 させるたびに 移 動 先 に 適 した 地 図 が 表 示 されるようになります つまりユーザーがドラッグアンドドロップなどで 地 図 を 移 動 させてもその 地 域 に 連 動 したAdsense 広 告 が 表 示 されます 設 定 項 目 はAdsenseのコンテンツ 向 けAdsenseの 項 目 を 入 力 する 26
ストリートビューが 表 示 可 能 な 道 を 地 図 上 に 表 示 する ストリートビューが 可 能 かどうかを 地 図 で 表 現 すると その 道 路 のストリートビューが 存 在 するかどうかがわ かります それをもとにストリートビューを 表 示 する などを 判 別 しても 良 いでしょう ストリートビューが 表 示 可 能 な 道 を 表 示 するには オーバーレイで 表 示 させるために 下 記 のようにひと つ 書 くだけで 大 丈 夫 です(サンプルファイル 中 ではコ メントアウトを 外 すだけ) g_map.addoverlay(new GStreetviewOverlay()); 27
ストリートビューの 表 示 基 本 指 定 した 緯 度 経 度 のストリートビューを 表 示 する ただし 最 寄 りのストリートビュー 可 能 な 場 所 を 表 示 することに 注 意 Javascript 内 stpanorama = new GStreetviewPanorama(document.getElementById("s treetview"),{latlng:pos}); 変 数 pos を 再 利 用 している HTML 内 <div id="streetview" style="width: 480px;height: 480px;"></div> ワーク 制 限 時 間 3 分 緯 度 経 度 の 値 (pos)を 変 えてみて 違 う 場 所 での 表 示 を 確 かめてください 角 度 を 変 えたり 移 動 してみたりしてその 付 近 か 確 認 してみてください 例 : 知 ってる 場 所 自 宅 付 近 勤 務 先 付 近 等 参 考 Google ストリートビュー APIのノウハウをいくつか http://okyuu.com/ja/tips/2792 28
ストリートビューで 表 示 される 方 向 ( 左 右 )の 指 定 左 右 の 角 度 をつけることによって 見 せたい 景 色 や 建 物 シンボルを 見 せることが 可 能 なので ホテル 紹 介 の ストリートビューを 行 う 場 合 はあらかじめ 角 度 も 指 定 しておくと 良 い 回 転 角 度 を 指 定 して 表 示 するにはnew GStreetviewPanorama()の2 番 目 のパラメータに pov:{ yaw : 回 転 角 度 }として 回 転 角 度 を 指 定 します これは 縦 軸 に 体 を 回 転 させるような 具 合 になります 正 数 を 指 定 すると 時 計 回 りに 負 数 を 指 定 すると 反 時 計 回 りとなります stpanorama = new GStreetviewPanorama(document.getElementById("s treetview"),{latlng:latlng,pov:{yaw:-90}}); 左 に90 度 回 転 した! 参 考 回 転 角 度 を 指 定 して 表 示 する いろいろな 例 文 が 充 実 http://www.openspc2.org/reibun/google/streetview/streetview/basi c/0004/index.html ワーク 制 限 時 間 3 分 好 きな 場 所 を 表 示 し 角 度 をつけて 表 示 してみる 参 考 Google ストリートビュー APIのノウハウをいくつか http://okyuu.com/ja/tips/2792 29
Google Maps APIの 情 報 やサンプルの 活 かし 方 これから 応 用 していくにはJavascriptについて 深 く 学 ばなければなりません しかし 少 しルールを 覚 えてお けば ほかのサイトを 参 考 にある 程 度 作 っていける 今 作 って いるもの 変 数 名 が g_map 地 図 を 書 き 出 す 場 所 のdivタ グのidが map_canvas 他 サイト 変 数 名 が map 地 図 を 書 き 出 す 場 所 のdivタ グのidが map いろんなサイトやブログなどで 紹 介 されているそー そコードのうち 変 数 に 注 意 しないといけない そのま まコピペしても 動 かないケースの 大 半 は 変 数 が 異 なっているままという 例 がある また 関 数 名 が 異 なっていたり 地 図 を 表 示 する 部 分 のid 指 定 が 異 なる 場 合 がある これら 変 数 名 や 関 数 名 の 相 違 を 認 識 したうえでそ れらのサンプルコードを 利 用 すると 動 かしやすい より 高 度 に 深 めていくためにはJavascriptのユー ザ 定 義 関 数 の 理 解 やその 他 文 法 の 理 解 が 必 要 と なる 変 数 がどのように 扱 われているか スクリプト の 意 味 を 理 解 していると 応 用 が 出 来 る 今 後 旅 行 系 APIと 連 携 してアイコン 表 示 するなどの 作 業 は 今 日 のマップ 描 画 の 知 識 をマスターしておけ ばとりあえず 大 丈 夫 である 今 日 の 地 図 表 現 を 自 在 にできるように 復 習 して 身 に 着 けておくと 次 回 PHP +APIと 連 携 させても 怖 くありません 30
3 時 間 目 課 題 Google Maps APIを 使 った 地 図 作 成 をそれぞれが 企 画 し それぞれが 自 力 で 作 ることを 目 指 します 好 きな 地 図 を 企 画 して 作 成 してください 難 易 度 複 雑 さは 問 いません できる 範 囲 でやってみてください 例 1: 神 田 から 鉄 道 博 物 館 までのドライブルート(できれば 各 地 点 のストリートビュー 表 示 ) 例 2: 箱 根 おすすめ 観 光 地 マップ(マーカークリックで 説 明 が 出 る) 作 った 地 図 とどのサイトを 参 考 にして 作 ったかを 発 表 してください(レビュー) 参 考 にしたサイトのURLはサークルに 書 き 込 んでいただけると シェアできて 良 いと 思 います ヘルプは 手 を 挙 げて 聞 いてください つまづいたり わからなくなったら すぐに 聞 いて 解 決 の 仕 方 を 探 ってみてください 独 学 ではないアドバンテージです 31