本日 　昨日
 
 
04/25(Thu) 13:37
■ 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追記）
⇒　Googleマップ V3 設置法 〜 Google Maps API V2 から V3 への移行方法　　.

（※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にラッピングして表示しているため、情報ウィンドウの配置が地図からはずれることがあります。
  1. Google Maps設置手順
  2. 最低限必要なカスタマイズと動作確認
  3. 実用的な地図にするためのカスタマイズ
  4. 地図やマーカーの緯度・経度の取得
  5. ミニアイコンの作成とマーカー追加プログラム
  6. 複数アイコンの作成とマーカー追加プログラム
  7. Googleマップ サイドバー付地図作成プログラム
■ はじめに
Googleマップとは、米国Google社が提供する無料地図サービスのことで、Ajax呼ばれる技術を利用して、ブラウザ上でオンライン地図を実現できるサービスです。オンライン登録を行えば、無料で使うことができ、ウェブサイト上やブログ上に簡単に世界地図を表示することができます。
旅行記の訪問地紹介やラーメン店等おいしい店制覇の記録、三国志等の歴史物語合戦地の記録など、地図情報や写真・解説文付きで紹介すればより解り易くなるのではと思います。菊池さんの工作室に設置してる地図はこちら。

■ Google Maps設置手順

  1. Googleアカウントの取得（持ってる方は次へ）
  2. Google Maps APIキーを取得する
  3. サンプルHTMLをカスタマイズし、自分のサイトに設置する。

■ 最低限必要なカスタマイズと動作確認

■ サンプルHTMLコードの基本構成
APIキーを取得すると、以下のサンプルHTMLが表示されます。このサンプルHTMLの内容はGoogle Maps APIページからGoogleアカウントでログインすればAPIキーとともにいつでも確認できます。
<!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&amp;v=2&amp;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); } } //]]> </script> ------------------------------------------------------------------------(4) </head> <body onload="load()" onunload="GUnload()"> ----------------------------------------(5) <div id="map" style="width: 500px; height: 300px"></div> -------------------------(6) </body> </html>

スポンサーリンク

■ 最低限必要なカスタマイズ
サンプルHTMLを貼り付けただけの状態では、Windowsでは地図が表示されません。理由は、ウェブページの文字コードがGoogle Mapsと異なっているからです。Google Mapsへ送り込まれる文字コードがutf-8なのに対して、ホームページやブログの文字コードは、Shift_JISやEUC-JPで書かれている場合が多いので表示されないということです。これを解決するには、以下の変更を行います。

  1. サンプルHTMLコード(1)の、ページの文字コードの変更（utf-8→Shift_JIS or EUC-JP）
  2. サンプルHTMLコード(2)の、APIの文字コードの明示（scriptタグのcharset属性をutf-8と明示する）
■ 地図の組込み
変更が完了したら、サンプルHTMLコード(2)の、[自分のAPIキー]があなたのAPIキーになってるか確認して、動作確認のため以下のどちらかの方法で、ウェブページやブログへ地図を組込みます。 ■ 動作確認
変更後のサンプル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」を作成しましたのでご利用ください。

  1. コントローラの設置：
  2. マーカーの追加と情報ウィンドウの表示：（GMarker、GInfoWindow）
  3. マウスホイールによるズーム処理（GScrollWheelZoom）
  4. コントローラの機能変更：
  5. デフォルト地図の変更：
  6. サイドバー付地図：
■ カスタマイズ後の地図とHTMLソース

（注）このソーズをコピー＆貼り付けする場合は、「マーカー追加」にある addMarker文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
<!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&amp;v=2&amp;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 />人造湖に○○湖と命名した最初の例。'); //（以降、必要なだけマーカーを追加する） } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>

■ 機能の削除・変更方法
機能の削除や変更はそれに該当する行を削除 or 変更します。例えば、

などです。

■ マーカー追加プログラムaddMarkerの使用方法

■ 地図やマーカーの緯度・経度の取得
Google Mapsでは地図やマーカーを表示する場所を指定する際に「緯度・経度」を用います。緯度・経度の取得にはいくつか方法がありますが、(1)の方法が、住所や名前などのキーワードを入力することで、その場所の地図と緯度・経度を表示してくれるので簡単で便利と思います。(1)でヒットしない場合は(2)の方法で取得します。
  1. Geocodingを利用する
  2. Googleマップを使って取得する
■ Google Maps API Tips
マーカーにはデフォルトアイコンの代わりにカスタムアイコンを定義できます。1つのアイコンは、アイコン本体の画像と影の画像から成り、アイコンのサイズGSizeと位置GPointを定義する必要があります。影付きのカスタムアイコンを自作するのは普通の人には難しいので、Google社の開発者向けドキュメント「Google Maps API地図の基本」で紹介されている、デフォルトアイコンG_DEFAULT_ICON タイプを使用したアイコンや、Google Ride Finderのミニマーカーを使用してマーカー作成プログラムを作成します。

■ 利用可能なアイコンのサイズと色
以下のマーカー追加プログラムには、カスタムアイコンが必要です。アイコンを右クリックし「名前を付けて画像を保存」で sample.html と同じフォルダにそのままの名前で保存します。

アイコン赤青緑黄紫桃薄青橙白灰黒影
カラー名redbluegreenyellowpurplepinkltblueorangewhitegrayblackshadow
ラージ(ドット付)−−−
ラージ(ドット無)−−−
プッシュピン−−−−
ミニ−−
■ ミニアイコンの作成とマーカー追加プログラム
Google Ride Finderのミニマーカー1個を使用してカスタムアイコンを作成したマーカー追加プログラムです。
  1. カスタマイズ後のHTMLソースの「//マーカー追加プログラム」から「//マーカー追加」行までを入れ替えます。
  2. アイコンの色を変更したい時は、mm_20_red.png の "red" を "blue"、"green"等利用したいカラー名に変更します。
  3. デフォルト地図を「地図」に、スケールコントローラを削除、マウスオーバーをマウスクリックに変更しています。

//ミニアイコンの作成とマーカー追加プログラム 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 に追加されています。

//ミニアイコン用ベースアイコンの作成 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"等のカラー名を元に下記のように指定します。

（注）下のソーズをコピー＆貼り付けする場合は、addMarker 文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
//マーカー追加 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が追加されています。

  1. 下のソーズをコピー＆貼り付けする場合は、addMarker 文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。
  2. サイドバーの縦幅は地図の縦幅と同じにします。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）
  3. 広域表示を行う小さい地図を重ねて表示を追加しています。
<!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&amp;v=2&amp;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; } } //]]> </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）上記プログラムのサイドバー項目にアイコンを追加する。吹き出しを最初から表示する

元プログラム中の「//複数アイコンの作成とサイドバー付きマーカー作成」部分に、

//複数アイコンの作成とサイドバー付きマーカー作成 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」などに変更します。

//ミニアイコンの作成とマーカー追加プログラム 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"); } //マーカー追加