|
|
08/10(Sun) 17:50
■ Googleマップを活用しよう － Google Maps v2を設置する
■ Google Maps API V2 から V3 への移行
2009/5/27に Google Maps API V3 が公開され、V2 の正式サポートは 2010/5/19に終了しましたが、2013/5/19(※1)までは引き続き機能するとのことで、長い間 Google Maps API V2 のまま手つかずだった「Googleマップを活用しよう」「GPSロガー旅記録」「湯巡りマップ」地図表示ページを V3 に移行することにしました。（2013.3.19追記）
（※1）（2013.5.1追記）2013/5/1に2013/11/19まで半年間延期のアナウンス。この日以降は V2 を使っている地図は、JavaScript ラッピングによる下位互換機能を持たせた V3 の地図に自動的に切り替わる。大部分のシンプルな地図は機能するそうですが(※2)、この間に V3 へ移行することを強く推奨しています。
（※2-1）（2013.11.20追記）当ホームページ内の Googleマップ V2地図 は 2013.11.19までは表示できましたが、11.20には全て表示できなくなりました。V3 の JavaScript wrapperで「大部分のシンプルな地図は表示できる」はずですが、原因は不明です。
（※2-2）（2013.11.21追記）翌11/22日に V2 ソースで V3 で表示されるようになりました。マーカーや情報ウィンドウの影画像が表示されない（V3 では影画像は全て無視される）、地図拡大時の V2/V3 の仕様差（V2は情報ウィンドウの位置固定で拡大、V3は地図中心固定で拡大）による情報ウィンドウの配置ずれや、マーカー数が多いとラッピングにより表示に時間が掛かるなどありますが。
このページのマップは、GoogleマップV2で作成したものをV3にラッピングして表示しているため、情報ウィンドウの配置が地図からはずれることがあります。
- Google Maps設置手順
- 最低限必要なカスタマイズと動作確認
- 実用的な地図にするためのカスタマイズ
- 地図やマーカーの緯度・経度の取得
- ミニアイコンの作成とマーカー追加プログラム
- 複数アイコンの作成とマーカー追加プログラム
- Googleマップ サイドバー付地図作成プログラム
■ はじめに
Googleマップとは、米国Google社が提供する無料地図サービスのことで、Ajax呼ばれる技術を利用して、ブラウザ上でオンライン地図を実現できるサービスです。オンライン登録を行えば、無料で使うことができ、ウェブサイト上やブログ上に簡単に世界地図を表示することができます。
旅行記の訪問地紹介やラーメン店等おいしい店制覇の記録、三国志等の歴史物語合戦地の記録など、地図情報や写真・解説文付きで紹介すればより解り易くなるのではと思います。菊池さんの工作室に設置してる地図はこちら。
■ Google Maps設置手順
- Googleアカウントの取得（持ってる方は次へ）
- Googleアカウントを持っていなければ、Googleアカウントページからアカウントを取得する。Googleアカウントを開設すると確認のメールが送られてくるので確認リンクをクリックして登録完了。
- Google Maps APIキーを取得する
- Google Maps APIに登録する にアクセス
- 「利用規約を読んだ上でこれに同意します」をチェックし、使用するウェブサイトの URLを入力後、「APIキーを生成する」ボタンを押す。
（注）使用するウェブサイトには「メインドメイン」を申請するとよい。メインドメインで申請すれば同じAPIキーで「サブドメイン」や「サブフォルダ」にも地図を表示できる。
- APIキー・設置できるURL・サンプルHTMLが表示される。
- サンプルHTMLをカスタマイズし、自分のサイトに設置する。
■ 最低限必要なカスタマイズと動作確認
■ サンプルHTMLコードの基本構成
APIキーを取得すると、以下のサンプルHTMLが表示されます。このサンプルHTMLの内容はGoogle Maps APIページからGoogleアカウントでログインすればAPIキーとともにいつでも確認できます。
|
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> -------------(1)
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[自分のAPIキー]"
type="text/javascript"></script> -----------------------------------------------(2)
<script type="text/javascript"> --------------------------------------------------(3)
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]]]><![CDATA[>
</script> ------------------------------------------------------------------------(4)
</head>
<body onload="load()" onunload="GUnload()"> ----------------------------------------(5)
<div id="map" style="width: 500px; height: 300px"></div> -------------------------(6)
</body>
</html>
]]>
|
- (1)：ページの文字コードの指定
- (2)：APIの読み込み
- (3)～(4)：Google Maps用プログラム。ここにカスタマイズプログラムを追加する
- (5)：ページ読み込みが完了したら関数load()を実行、ページが閉じられるときにGUnload()を実行するコマンド
- (6)：地図の表示位置と表示サイズの指定。ここに地図が表示される
スポンサーリンク
■ 最低限必要なカスタマイズ
サンプルHTMLを貼り付けただけの状態では、Windowsでは地図が表示されません。理由は、ウェブページの文字コードがGoogle Mapsと異なっているからです。Google Mapsへ送り込まれる文字コードがutf-8なのに対して、ホームページやブログの文字コードは、Shift_JISやEUC-JPで書かれている場合が多いので表示されないということです。これを解決するには、以下の変更を行います。
- サンプルHTMLコード(1)の、ページの文字コードの変更（utf-8→Shift_JIS or EUC-JP）
- <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
- サンプルHTMLコード(2)の、APIの文字コードの明示（scriptタグのcharset属性をutf-8と明示する）
- <script src="http://maps.google.com/maps?file=api&v=2&key=[自分のAPIキー]" charset="utf-8" type="text/javascript"></script>
■ 地図の組込み
変更が完了したら、サンプルHTMLコード(2)の、[自分のAPIキー]があなたのAPIキーになってるか確認して、動作確認のため以下のどちらかの方法で、ウェブページやブログへ地図を組込みます。
- iframeを利用して設置する
この方法のメリットは、ページ内のインラインへフレームへ別の文書を読み込むので、異なるドキュメントタイプや文字コードでも問題ないということです。特にブログではドキュメントタイプやの文字コードは自動出力になっており、ユーザーが簡単に変更できないケースも多々あるのでこの方法をお勧めします。
- 地図を表示したい場所に以下を記述します。（カスタマイズ後の地図のHTMLファイル名：sample.html）
- <iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="./sample.html"></iframe>
- ウェブページにソースコードを追加する
ウェブページに直接HTMLコードを組込む方法です。上記サンプルHTMLを元に組込むソースと箇所を説明します。
- head部：カスタマイスされたソースNo(1),(2),(3)～(4)をhead部に追加します
- bodyタグ：bodyタグ内にonload="load()" onunload="GUnload()"を追加します（ソースNo(5)）
- body部：地図を表示したい場所に
<div id="map" style="width: 500px; height: 300px"></div>を記述します（ソースNo(6)）
■ 動作確認
変更後のサンプルHTMLでは、Google社発祥の地、カルフォルニア州・パロアルトの地図（右図）が表示されます。この地図が表示されれば、ウェブページやブログへの組込みは正常に完了です。
■ 実用的な地図にするためのカスタマイズ
■ Google Maps API（Application Program Interface）とは？
自分の目的に合った地図にするためには、サンプルHTMLを元にカスタマイズが必要です。Google Maps APIでは、JavaScriptを使ってGoogleマップをウェブページに埋め込むことができます。地図の表示（GMap2）を始め、マップタイプ（GMapType）、地図の縮尺（GScaleControl）、コントロール（GMapControl）、マーカー（GMarker）、情報ウィンドウ（GInfoWindow）など、地図を操作したりコンテンツを地図に追加するための多数のユーティリティをAPIといいます。カスタマイズはこのAPIを活用して行います。方法は、サンプルHTMLのGoogle Maps用プログラム内に、該当するAPIを追加していくことで行います。
（参考URL）
Google Maps API地図の基本、Google Maps APIリファレンス、Google Maps API V2 Class Reference (意訳とサンプル)
■ 実用的な地図にするためのカスタマイズ
実用的な地図にするために考えられるカスタマイズ項目には以下のものがあります。また、マーカー追加を簡便にするために「Googleマップマーカー作成プログラム addMarker」を作成しましたのでご利用ください。
- コントローラの設置：
- マップコントローラ（拡大縮小スライドバーと位置移動の十字ボタン）（GMapControl）
- マップタイプコントローラ（地図、航空写真、地図+写真）（GMapType）
- スケールコントローラ(距離目盛)（GScaleControl）
- マーカーの追加と情報ウィンドウの表示：（GMarker、GInfoWindow）
- マーカーを追加し、それぞれのマーカーにマウスが当たると情報ウィンドウを表示する
- その情報ウィンドウ内にマーカー名とマーカーの写真を表示し、それをクリックすると指定したURLへジャンプする
- マウスホイールによるズーム処理（GScrollWheelZoom）
- コントローラの機能変更：
- 小さな地図サイズでは、マップコントローラの「スライドバー」をはずす（GSmallMapControl）
- 目的によっては、マップタイプコントローラの「地図+写真」を「地形」に変更する（addMapType、removeMapType）
- デフォルト地図の変更：
- ニーズに合わせて、デフォルト地図を「地図」から「地形」や「航空写真」等に変更する（setMapType）
- サイドバー付地図：
- 地図の横にサイドバーを作成し、項目がクリックされたら情報ウィンドウを表示する
■ カスタマイズ後の地図とHTMLソース
（注）このソーズをコピー＆貼り付けする場合は、「マーカー追加」にある addMarker文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
|
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[自分のAPIキー]"
charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));//地図を作成
map.setCenter(new GLatLng(35.969115,139.372559),8); //地図を表示（(中心の緯度,経度),縮尺）
map.addControl(new GSmallMapControl()); //マップコントローラを付ける
map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける
map.addControl(new GScaleControl()); //スケールコントローラを付ける
map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する
map.addMapType(G_PHYSICAL_MAP); //マップタイプコントローラに地形を追加する
map.setMapType(G_PHYSICAL_MAP); //デフォルトの地図を地形図にする
map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化
//マーカー追加プログラム
function addMarker(lat,lng,html) {
var marker = new GMarker(new GLatLng(lat,lng)); //マーカー生成
GEvent.addListener(marker,"mouseover",
function(){marker.openInfoWindowHtml(html);});
//マーカーにマウスが当たると情報ウィンドウを表示する
map.addOverlay(marker); //マーカーをオーバレイ表示する
}
//マーカー追加
addMarker(35.658545,139.745683,'<a href="http://www.tokyotower.co.jp/"
target="_blank"><img src="tokyotower.jpg" border="0">東京タワー</a>');
addMarker(35.455557,139.674572,'<a href="http://www.skywalk.city.yokohama.jp/"
target="_blank"><img src="baybridge.jpg" border="0">横浜ベイブリッジ</a>');
addMarker(35.362859,138.730883,'<a href="http://www.pref.shizuoka.jp/~live/"
target="_blank">富士山</a>');
addMarker(35.773552,140.388244,'成田空港');
addMarker(36.373055,140.449523,'<a href="http://www.kairakuen.u-888.com/"
target="_blank"><img src="kairakuen.jpg" border="0">水戸偕楽園</a>');
addMarker(35.61703,139.188953,'相模湖<p>相模湖は、相模川を相模ダムによって<br />
せき止めて作られた人造湖である。<br />人造湖に○○湖と命名した最初の例。');
//（以降、必要なだけマーカーを追加する）
}
}
//]]]]><![CDATA[>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
]]>
|
■ 機能の削除・変更方法
機能の削除や変更はそれに該当する行を削除 or 変更します。例えば、
- デフォルトの地図を「地図」のままにしたい場合は、該当する行のmap.setMapType行を削除する。
- スケールコントローラが不要の場合は、該当する行のmap.addControl(new GScaleControl());を削除する。
- スライドバー付きのマップコントローラにしたい場合は、map.addControl(new GSmallMapControl());をmap.addControl(new GLargeMapControl());と”Small”を”Large”に変更する。
- マウスオーバーではなくてマウスクリックで情報ウィンドウを表示したい場合は、GEvent.addListenerのパラメータ ”mouseover”を”click”に変更する。
- 情報ウィンドウに文字情報だけを表示したい場合は、パラメータhtmlの内容から<img src=・・>の部分を削除する。
- マーカーを設定しない場合は、「//マーカー追加プログラム」行から「//（以降、必要なだけマーカーを追加する）」行までを削除する。
- マーカーのみ表示（情報ウィンドウ非表示）の場合は、マーカー追加プログラム内のGEvent.addListener行を削除し、マーカー追加記述文はaddMarker(35.658545,139.745683,"");とパラメータhtml部分を空白にする。
などです。
■ マーカー追加プログラムaddMarkerの使用方法
- パラメータlat,lngにマーカーの緯度・経度、htmlに情報ウィンドウ内に表示する内容をHTML文で記述する。
- html内の[リンク先URL]、[画像URL]は、マーカーの実際のリンクと画像のURLに変更する。
- マーカーが多数になると、HTMLソースが長文となりメンテナンスも大変になるので、JavaScript部分（Google Maps用プログラム）をjsファイルとして外部ファイル化するとすっきりします。方法はこちら。
■ 地図やマーカーの緯度・経度の取得
Google Mapsでは地図やマーカーを表示する場所を指定する際に「緯度・経度」を用います。緯度・経度の取得にはいくつか方法がありますが、(1)の方法が、住所や名前などのキーワードを入力することで、その場所の地図と緯度・経度を表示してくれるので簡単で便利と思います。(1)でヒットしない場合は(2)の方法で取得します。
- Geocodingを利用する
- Geocodingにアクセスします。ジオコーディングとは、住所や屋号、ビル名、地名、駅名、郵便番号、電話番号など位置を連想させるワードから、緯度・経度の位置情報を算出する技術です。
- トップページにある検索ボックスに、地図を表示したい場所のキーワードを入力します。
- キーワードにヒットした場所が表示されるので、その場所の緯度・経度を取得します。例えば、東京タワーの緯度・経度は画面（クリックで拡大画像）から（35.658545,139.745683）となります。
- Googleマップを使って取得する
- Gooleマップで緯度・経度を取得したい地図を表示します。位置の精度を上げるため画面をさらに拡大します。
- 調べたい場所で右クリックし「ここを地図の中心」を選択、その場所が地図の中央に来るように移動します。
- 地図の右上にある「リンク」をクリックし、「このリンクをメールに貼り付けて地図を共有できます」の下に表示されているURLをコピーします。
- 取得したURLの「ll=」の後に記述されている値が緯度と経度になります。
- 下記は(2)の方法で取得した東京タワーのURLです。
http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%9D%B1%E4%BA%AC%E3
%82%BF%E3%83%AF%E3%83%BC&sll=36.5626,136.362305&sspn=35.655214,51.152344
&ie=UTF8&ll=35.65856,139.745423&spn=0.002114,0.003122&z=18&iwloc=A
→「ll=」の後に記述されている値、(35.65856,139.745423)が求める緯度・経度になります。
■ Google Maps API Tips
マーカーにはデフォルトアイコンの代わりにカスタムアイコンを定義できます。1つのアイコンは、アイコン本体の画像と影の画像から成り、アイコンのサイズGSizeと位置GPointを定義する必要があります。影付きのカスタムアイコンを自作するのは普通の人には難しいので、Google社の開発者向けドキュメント「Google Maps API地図の基本」で紹介されている、デフォルトアイコンG_DEFAULT_ICON タイプを使用したアイコンや、Google Ride Finderのミニマーカーを使用してマーカー作成プログラムを作成します。
■ 利用可能なアイコンのサイズと色
以下のマーカー追加プログラムには、カスタムアイコンが必要です。アイコンを右クリックし「名前を付けて画像を保存」で sample.html と同じフォルダにそのままの名前で保存します。
| アイコン | 赤 | 青 | 緑 | 黄 | 紫 | 桃 | 薄青 | 橙 | 白 | 灰 | 黒 | 影 |
| カラー名 | red | blue | green | yellow | purple | pink | ltblue | orange | white | gray | black | shadow |
| ラージ(ドット付) |  |  |  |  |  |  |  |  | － | － | － |  |
| ラージ(ドット無) |  |  |  |  |  |  |  |  | － | － | － |
| プッシュピン |  |  |  |  |  |  |  | － | － | － | － |  |
| ミニ |  |  |  |  |  | － | － |  |  |  |  |  |
- ラージアイコン
- ドット付：http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png
- ドット無：http://maps.google.co.jp/mapfiles/ms/icons/red.png
- 影：http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png
- プッシュピンアイコン
- 本体：http://maps.google.co.jp/mapfiles/ms/icons/red-pushpin.png
- 影：http://maps.google.co.jp/mapfiles/ms/icons/pushpin_shadow.png
- ミニアイコン
- 本体：http://labs.google.com/ridefinder/images/mm_20_red.png
- 影：http://labs.google.com/ridefinder/images/mm_20_shadow.png
■ ミニアイコンの作成とマーカー追加プログラム
Google Ride Finderのミニマーカー1個を使用してカスタムアイコンを作成したマーカー追加プログラムです。
- カスタマイズ後のHTMLソースの「//マーカー追加プログラム」から「//マーカー追加」行までを入れ替えます。
- アイコンの色を変更したい時は、mm_20_red.png の "red" を "blue"、"green"等利用したいカラー名に変更します。
- デフォルト地図を「地図」に、スケールコントローラを削除、マウスオーバーをマウスクリックに変更しています。
|
<![CDATA[
//ミニアイコンの作成とマーカー追加プログラム
var miniIcon = new GIcon(); //ミニアイコンの作成
miniIcon.image = "./mm_20_red.png"; //アイコン画像のURL
miniIcon.shadow = "./mm_20_shadow.png"; //影画像のURL
miniIcon.iconSize = new GSize(12, 20); //アイコン画像のサイズ
miniIcon.shadowSize = new GSize(22, 20); //影画像のサイズ
miniIcon.iconAnchor = new GPoint(6, 20);
//影画像の位置。アイコン画像の左上隅からの相対位置で示す
miniIcon.infoWindowAnchor = new GPoint(5, 1);
//情報ウィンドウの位置。アイコン画像左上隅からの相対位置
//マーカー追加プログラム
function addMarker(lat,lng,html) {
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml(html);});
map.addOverlay(marker);
}
//マーカー追加
]]>
|
■ 複数アイコンの作成とマーカー追加プログラム
1つの地図の中でマーカーのサイズや色を変えて表示したい場合に使います。アイコンの種類・サイズ・色を指定するパラメータ icon が addMarker に追加されています。
|
<![CDATA[
//ミニアイコン用ベースアイコンの作成
var baseIcon = new GIcon();
baseIcon.shadow = "./mm_20_shadow.png"; //影画像のURL
baseIcon.iconSize = new GSize(12, 20); //アイコン画像のサイズ
baseIcon.shadowSize = new GSize(22, 20); //影画像のサイズ
baseIcon.iconAnchor = new GPoint(6, 20);
//影画像の位置。アイコン画像の左上隅からの相対位置で示す
baseIcon.infoWindowAnchor = new GPoint(5, 1);
//情報ウィンドウの位置。アイコン画像左上隅からの相対位置
//複数アイコンの作成とマーカー追加プログラム
function addMarker(lat,lng,html,icon) {
if(icon == ""){
//デフォルトアイコン（ドット付赤）
var marker = new GMarker(new GLatLng(lat,lng));
} else if(icon == "blueWD" || icon == "greenWD" ||
icon == "yellowWD" ||icon == "purpleWD" || icon == "orangeWD" ||
icon == "pinkWD" ||icon == "ltblueWD" || icon == "redND" ||
icon == "blueND" ||icon == "greenND" || icon == "yellowND" ||
icon == "purpleND" ||icon == "orangeND" || icon == "pinkND"){
//ラージアイコン（ドット付:青,緑,黄,紫,橙,桃,薄青,＆ドット無:赤,青,緑,黄,紫,橙,桃）
icon = icon.replace("WD","-dot"); //アイコンファイル名生成
icon = icon.replace("ND","");
var largeIcon = new GIcon(G_DEFAULT_ICON); //ラージアイコン作成
largeIcon.image = "./"+icon+".png"; //アイコン画像のURL
largeIcon.iconSize = new GSize(32, 32); //アイコン画像のサイズ
var marker = new GMarker(new GLatLng(lat,lng),{icon:largeIcon});
} else if(icon == "red" || icon == "blue" || icon == "green" ||
icon == "yellow" || icon == "purple" || icon == "orange" ||
icon == "white" || icon == "gray" || icon == "black"){
//ミニアイコン赤,青,緑,黄,紫,橙,白,灰,黒
var miniIcon = new GIcon(baseIcon); //ミニアイコン作成
miniIcon.image = "./mm_20_"+icon+".png"; //アイコン画像のURL
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
} else {alert("アイコン "+icon+" の指定ミスです");}
//マーカーにマウスが当たると情報ウィンドウを表示する
GEvent.addListener(marker,"mouseover",
function(){marker.openInfoWindowHtml(html);});
map.addOverlay(marker); //マーカーを地図にオーバレイ表示
}
]]>
|
addMarkerのパラメータ icon には、"red"、"blue"、"green"等のカラー名を元に下記のように指定します。
- デフォルトアイコン（ドット付赤）：""（空白）
- ラージアイコン（ドット付）：カラー名+WD（例、"blueWD"、"greenWD"、"yellowWD"・・・）
- ラージアイコン（ドット無）：カラー名+ND（例、"redND"、"blueND"、"greenND"、"yellowND"・・・）
- ミニアイコン：カラー名（例、"red"、"blue"、"green"、"yellow"・・・）
（注）下のソーズをコピー＆貼り付けする場合は、addMarker 文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
|
<![CDATA[
//マーカー追加
addMarker(35.658545,139.745683,'<a href="http://www.tokyotower.co.jp/"
target="_blank"><img src="tokyotower.jpg" border="0">東京タワー</a>','');
addMarker(35.455557,139.674572,'<a href="http://www.skywalk.city.yokohama.jp/"
target="_blank"><img src="baybridge.jpg" border="0">横浜ベイブリッジ</a>','yellowWD');
addMarker(35.362859,138.730883,'<a href="http://www.pref.shizuoka.jp/~live/"
target="_blank">富士山</a>','greenND');
addMarker(35.773552,140.388244,'成田空港','blueND');
addMarker(36.373055,140.449523,'<a href="http://www.kairakuen.u-888.com/"
target="_blank"><img src="kairakuen.jpg" border="0">水戸偕楽園</a>','white');
addMarker(35.61703,139.188953,'相模湖<p>相模湖は、相模川を相模ダムによって<br />
せき止めて作られた人造湖である。<br />人造湖に○○湖と命名した最初の例。','purple');
//（以降、必要なだけマーカーを追加する）
]]>
|
■ Googleマップ サイドバー付地図作成プログラム
「複数アイコンの作成とマーカー追加プログラム」にサイドバーを追加したものです。マーカー or サイドバーをクリックすると情報ウィンドウが表示されます。addMarkerにパラメータmarkerNameが追加されています。
- 下のソーズをコピー＆貼り付けする場合は、addMarker 文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
- サイドバーの縦幅は地図の縦幅と同じにします。overflow:auto;指定で、サイドバーが地図縦幅を超えると自動的にスクロール表示になります。
- <div id="map" style="font-size:13px; width: 500px; height: 300px"></div>
- <div id="sidebar" style="font-size:13px; border: 1px solid #808080; padding: 4px;
- width:120px; height:290px; overflow:auto;"></div> （※300px－(border: 1px＋padding: 4px)×2）
- 広域表示を行う小さい地図を重ねて表示を追加しています。
|
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[自分のAPIキー]"
charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//Googleマップ サイドバー付地図作成プログラム by 菊池さんの工作室 http://kikuchisan.net/
var markerList = new Array();
var htmlList = new Array();
var sidebarList = "";
// 指定したマーカーの情報ウィンドウ表示
function dispMarker(markername) {
markerList[markername].openInfoWindowHtml(htmlList[markername]);
}
function load() {
if (GBrowserIsCompatible()) {
//地図作成
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.969115,139.372559),8);//地図を表示（(中心の緯度,経度),縮尺）
map.addControl(new GSmallMapControl()); //マップコントローラを付ける
map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける
map.addControl(new GScaleControl()); //スケールコントローラを付ける
map.addControl(new GOverviewMapControl(new GSize(120, 80)));
//広域表示の小さい地図を重ねて表示
map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する
map.addMapType(G_PHYSICAL_MAP); //マップタイプコントローラに地形を追加する
map.setMapType(G_PHYSICAL_MAP); //デフォルトの地図を地形図にする
map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化
//ミニアイコン用ベースアイコンの作成
var baseIcon = new GIcon();
baseIcon.shadow = "./mm_20_shadow.png"; //影画像のURL
baseIcon.iconSize = new GSize(12, 20); //アイコン画像のサイズ
baseIcon.shadowSize = new GSize(22, 20); //影画像のサイズ
baseIcon.iconAnchor = new GPoint(6, 20);
//影画像の位置。アイコン画像の左上隅からの相対位置で示す
baseIcon.infoWindowAnchor = new GPoint(5, 1);
//情報ウィンドウの位置。アイコン画像左上隅からの相対位置
//複数アイコンの作成とサイドバー付きマーカー作成
function addMarker(markerName,lat,lng,html,icon) {
if(icon == ""){
//デフォルトアイコン（ドット付赤）
var marker = new GMarker(new GLatLng(lat,lng));
} else if(icon == "blueWD" || icon == "greenWD" || icon == "yellowWD" ||
icon == "purpleWD" || icon == "orangeWD" || icon == "pinkWD" ||
icon == "ltblueWD" || icon == "redND" || icon == "blueND" ||
icon == "greenND" || icon == "yellowND" || icon == "purpleND" ||
icon == "orangeND" || icon == "pinkND"){
//ラージアイコン（ドット付:青,緑,黄,紫,橙,桃,薄青,＆ドット無:赤,青,緑,黄,紫,橙,桃）
icon = icon.replace("WD","-dot"); //アイコンファイル名生成
icon = icon.replace("ND","");
var largeIcon = new GIcon(G_DEFAULT_ICON); //ラージアイコン作成
largeIcon.image = "./"+icon+".png"; //アイコン画像のURL
largeIcon.iconSize = new GSize(32, 32); //アイコン画像のサイズ
var marker = new GMarker(new GLatLng(lat,lng),{icon:largeIcon});
} else if(icon == "red" || icon == "blue" || icon == "green" ||
icon == "yellow" ||icon == "purple" || icon == "orange" ||
icon == "white" || icon == "gray" || icon == "black"){
//ミニアイコン赤,青,緑,黄,紫,橙,白,灰,黒
var miniIcon = new GIcon(baseIcon); //ミニアイコン作成
miniIcon.image = "./mm_20_"+icon+".png"; //アイコン画像のURL
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
} else {alert("アイコン "+icon+" の指定ミスです");}
//マーカーをクリックするとマーカー名markerNameの情報ウィンドウを表示する
GEvent.addListener(marker,"click",function(){dispMarker(markerName)});
map.addOverlay(marker); //マーカーを地図にオーバレイ表示
markerList[markerName] = marker; //マーカーをmarkerリストに追加
htmlList[markerName] = html; //html文をhtmlリストに追加
//サイドバーをsidebarリストに追加
sidebarList += '<a href="javascript:;" onclick="dispMarker(\''
+markerName+'\');">'+markerName+'</a><br />';
}
//マーカー追加
addMarker('東京タワー',35.658545,139.745683,'<a href="http://www.tokyotower.co.jp/"
target="_blank"><img src="tokyotower.jpg" border="0">東京タワー</a>','');
addMarker('横浜ベイブリッジ',35.455557,139.674572,
'<a href="http://www.skywalk.city.yokohama.jp/" target="_blank">
<img src="baybridge.jpg" border="0">横浜ベイブリッジ</a>','yellowWD');
addMarker('富士山',35.362859,138.730883,'<a href="http://www.pref.shizuoka.jp/~live/"
target="_blank">富士山</a>','greenND');
addMarker('成田空港',35.773552,140.388244,'成田空港','blueND');
addMarker('水戸偕楽園',36.373055,140.449523,'<a href="http://www.kairakuen.u-888.com/"
target="_blank"><img src="kairakuen.jpg" border="0">水戸偕楽園</a>','white');
addMarker('相模湖',35.61703,139.188953,'相模湖<p>相模湖は、相模川を相模ダムによって<br />
せき止めて作られた人造湖である。<br />人造湖に○○湖と命名した最初の例。','purple');
//（以降、必要なだけマーカーを追加する）
//サイドバー書き出し
document.getElementById("sidebar").innerHTML = sidebarList;
}
}
//]]]]><![CDATA[>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table><tr><td valign="top">
<div id="map" style="font-size:13px; width: 500px; height: 300px"></div>
</td><td valign="top">
<div id="sidebar" style="font-size:13px; border: 1px solid #808080; padding: 4px;
width:120px; height:290px; overflow:auto;"></div>
</td></tr></table>
</body>
</html>
]]>
|
■ （改造その1）上記プログラムのサイドバー項目にアイコンを追加する。吹き出しを最初から表示する
元プログラム中の「//複数アイコンの作成とサイドバー付きマーカー作成」部分に、
- アイコンを追加する場合は、※印の行を追加・変更します。
- 吹き出しを最初から表示する場合は、※※印の行を追加します。（表示される吹き出しは最後に記述したaddMarker文のマーカーの吹き出しになります。上の例では「相模湖」）
|
<![CDATA[
//複数アイコンの作成とサイドバー付きマーカー作成
function addMarker(markerName,lat,lng,html,icon) {
if(icon == ""){
//デフォルトアイコン（ドット付赤）
var marker = new GMarker(new GLatLng(lat,lng));
※ iconURL="./red-dot.png";
} else if(icon == "blueWD" || icon == "greenWD" || icon == "yellowWD" ||
icon == "purpleWD" || icon == "orangeWD" || icon == "pinkWD" ||
icon == "ltblueWD" || icon == "redND" || icon == "blueND" ||
icon == "greenND" || icon == "yellowND" || icon == "purpleND" ||
icon == "orangeND" || icon == "pinkND"){
//ラージアイコン（ドット付:青,緑,黄,紫,橙,桃,薄青,＆ドット無:赤,青,緑,黄,紫,橙,桃）
icon = icon.replace("WD","-dot"); //アイコンファイル名生成
icon = icon.replace("ND","");
var largeIcon = new GIcon(G_DEFAULT_ICON); //ラージアイコン作成
largeIcon.image = "./"+icon+".png"; //アイコン画像のURL
largeIcon.iconSize = new GSize(32, 32); //アイコン画像のサイズ
var marker = new GMarker(new GLatLng(lat,lng),{icon:largeIcon});
※ iconURL="./"+icon+".png";
} else if(icon == "red" || icon == "blue" || icon == "green" ||
icon == "yellow" || icon == "purple" || icon == "orange" ||
icon == "white" || icon == "gray" || icon == "black"){
//ミニアイコン赤,青,緑,黄,紫,橙,白,灰,黒
var miniIcon = new GIcon(baseIcon); //ミニアイコン作成
miniIcon.image = "./mm_20_"+icon+".png"; //アイコン画像のURL
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
※ iconURL="./mm_20_"+icon+".png";
} else {alert("アイコン "+icon+" の指定ミスです");}
//マーカーをクリックするとマーカー名markerNameの情報ウィンドウを表示する
GEvent.addListener(marker,"click",function(){dispMarker(markerName)});
map.addOverlay(marker); //マーカーを地図にオーバレイ表示
markerList[markerName] = marker; //マーカーをmarkerリストに追加
htmlList[markerName] = html; //html文をhtmlリストに追加
//サイドバーをsidebarリストに追加
※ sidebarList += '<img src='+iconURL+'><a href="javascript:;"
onclick="dispMarker(\''+markerName+
'\');">'+markerName+'</a><br />';
※※ //マーカーに擬似的にクリックされたイベントを発生させる
※※ GEvent.trigger(marker,"click");
}
//マーカー追加
]]>
|
■ （改造その2）アイコン1個で表示する場合はアイコン定義が１回で済むのでスピードアップが図れます
元プログラム中の「//ミニアイコン用ベースアイコンの作成」から「//マーカー追加」までと下記を入れ替えます。
（注）アイコンの色を変更したい場合は、該当アイコンを準備した上で「//アイコン画像のURL」の./mm_20_red.pngの「red」を「blue」「green」「yellow」「white」などに変更します。
|
<![CDATA[
//ミニアイコンの作成とマーカー追加プログラム
var miniIcon = new GIcon(); //ミニアイコンの作成
miniIcon.image = "./mm_20_red.png"; //アイコン画像のURL
miniIcon.shadow = "./mm_20_shadow.png"; //影画像のURL
miniIcon.iconSize = new GSize(12, 20); //アイコン画像のサイズ
miniIcon.shadowSize = new GSize(22, 20); //影画像のサイズ
miniIcon.iconAnchor = new GPoint(6, 20);
//影画像の位置。アイコン画像の左上隅からの相対位置で示す
miniIcon.infoWindowAnchor = new GPoint(5, 1);
//情報ウィンドウの位置。アイコン画像左上隅からの相対位置
//マーカー追加プログラム
function addMarker(markerName,lat,lng,html) {
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
GEvent.addListener(marker,"click",function(){dispMarker(markerName)});
map.addOverlay(marker);
markerList[markerName] = marker; //マーカーをマーカーリストに追加
htmlList[markerName] = html; //html文をhtmlリストに追加
//サイドバーをsidebarリストに追加
sidebarList += '<img src='+miniIcon.image+'><a href="javascript:;"
onclick="dispMarker(\''+
markerName+'\');">'+markerName+'</a><br />';
//マーカーに擬似的にクリックされたイベントを発生させる
GEvent.trigger(marker,"click");
}
//マーカー追加
]]>
|
|
|
ホーム
韓国ドラマ(3)
