スタートページ> Javascript Google Maps Google Maps API の基礎
マーカーをクリックしたときの動作機能などは、「Google Maps API の機能」で扱いました。ここでは、マーカーのスタイルをカスタマイズします。その例として、マーカー[0](岩槻城址公園)をいろいろ変えてみます。
参照:「Maps Javascript API - Drawing on the Map」( https://developers.google.com/maps/documentation/javascript/overlays?hl=ja)
最初および最初の状態に戻すときに行ないます。 →説明
Google Chartによる指定→説明 |
ここでは「地図表示]に青字の追加function「アイコン変更()」を加えたものを標準例といい、そのソースコードを標準ソースコードといいます。
マーカー以外の事項は不要だとするなら、灰色の部分は不要です。
対象とするマーカーはマーカー[0](岩槻城址公園)だけですので、さらに絞り込むこともできます。
しかし、他の例との一貫性を重視して、ここでは不要な部分もそのままにしています。
スクリプト <script src="https://maps.googleapis.com/maps/api/js?key=xxxxx" async defer"></script> // A <script src="sample/script.js"></script> // B <script> // 「JSファイル」で設定され入力されるグローバル変数 // var 場所 = new Array(); // var 緯度 = new Array(); // var 経度 = new Array(); // var URL = new Array(); // 岩槻城址公園 // 場所[0] = "岩槻城址公園"; // 緯度[0] = 35.95055; 経度[0] = 139.7109; // URL[0] = "joushi-kouen.html"; // 岩槻文化公園 // 場所[1] = "岩槻文化公園"; // 緯度[1] = 35.944516; 経度[1] = 139.722584; // URL[1] = "bunka-kouen.html"; // 岩槻駅 // 場所[2] = "岩槻駅"; // 緯度[2] = 35.949492; 経度[2] = 139.69305; // URL[2] = "iwatuki-eki.html"; // function「地図表示」で定義されるグローバル変数 var 地図; // C var マーカー = new Array(); var 吹出し = new Array(); function 地図表示(JSファイル名) { // D var 場所数 = 場所.length; // ====== 相対URLの修正 ======= var パス = ""; var 正規表現 = new RegExp("/"); if (JSファイル名.match(正規表現)) { パス = RegExp.leftContext + "/"; // F } if ( (パス != "") && (URL[0].indexOf(パス) < 0) ) { for (i=0; i<場所数; i++) { URL[i] = パス + URL[i]; // G } } // ========= 中心緯度・経度の決定 ========== var 地図中心緯度 = 0; var 地図中心経度 = 0; for (i=0; i<場所数; i++) { 地図中心緯度 = 地図中心緯度 + 緯度[i]; 地図中心経度 = 地図中心経度 + 経度[i]; } 地図中心緯度 = 地図中心緯度 / 場所数; // H 地図中心経度 = 地図中心経度 / 場所数; // ========= 地図の表示 ========== var 地図表示ズーム = 14; // I J┐ var 中心座標 = new google.maps.LatLng(地図中心緯度, 地図中心経度); var 地図情報 = { // K zoom: 地図表示ズーム, center: 中心座標, mapTypeId: google.maps.MapTypeId.ROADMAP // L }; // M┐ 地図 = new google.maps.Map(document.getElementById("地図表示場所"), 地図情報); // ======== マーカー・吹出しの設定 =========== for (i=0; i<場所数; i++) { // マーカーの設定と表示 マーカー[i] = new google.maps.Marker( { // N position: new google.maps.LatLng(緯度[i], 経度[i]), map: 地図, } ); // 吹出しの設定 // O┐ var 吹出内容 = "<a href='" + URL[i] + "' target='_blank'>" + 場所[i] + "</a>"; 吹出し[i] = new google.maps.InfoWindow( { // P content: 吹出内容 } ); }; } // =============== 追加function ================= function アイコン変更(アイコンURL) { // A マーカー[0].setMap(null); // B マーカー[0].setIcon(アイコンURL); // C マーカー[0].setMap(地図); // D } HTML <p> <!-- R┐ --> <button onClick='地図表示("sample/script.js")'>地図表示</button> <button onClick='アイコン変更("sample/icon.png")'>アイコン変更</button> </p> <div id="地図表示場所" style="width:600px; height:400px"></div> <!-- S -->
青字以外の部分の説明は、「Google Maps APIの基礎」を参照してください。ここでは青字部分だけについて説明します。
ここでは、画像(sample/icon.png)をマーカー[0]のアイコンにしています。
function アイコン変更(アイコンURL) { // A マーカー[0].setMap(null); // B 現マーカーの削除 マーカー[0].setIcon(アイコンURL) // C 新アイコンの設定 マーカー[0].setMap(地図); // D 新マーカーの表示 } <button onClick='アイコン変更("sample/icon.png")'>自作画像</button> <!-- E -->
これらのプロセスは自明でしょう。Bで現在表示されているマーカーのアイコンをいったん消して、EからAで受け取った sample/icon.png をCでマーカーのアイコンとして設定、Dで表示しています。
Googleは、アイコンのライブラリを提供しています。ここでは「rail.png」を使いました。
http://maps.google.co.jp/mapfiles/ms/icons/rail.png
restaurantやhospitalなど豊富な種類があります。
参考:「アイコン一覧表」
http://waox.main.jp/news/?page_id=229
Googleは、多様なアイコンのテンプレートを公開しており、そのURL(http://chart.apis.google.com/chart)にパラメタを指定することにより、容易にアイコンの変更をすることができます。
例えば、「アイコンURL」引数を次のように記述します。
"http://chart.apis.google.com/chart ・・・URL:いつも同じ
?chst=d_map_pin_letter&chld=A|00FF00|FF0000"; ・・・パラメタ:ケースで変わる部分
パラメタの ? はパラメタの先頭、& はパラメタ間の区切記号です。
上の例では、次の属性指定になります。属性はchstとchldの2つです。
chst=d_map_pin_letter ・・・アイコンの種類
chld=A|00FF00|FF0000 ・・・詳細の指定
chstは、いろいろな種類がありますが、一般に d_map_pin_letter_withshadow のように _withshadow を付けるとアイコンに影がつきます。
chldは、この例のように、いくつかの値が「|」で区切られています。その内容は、chet(アイコンの種類)により異なります。一般に、右側の値は省略できるものもありますが、途中の値を省略することはできません。
パラメタの指定方法の詳細については、次のGoogleのサイトを参照してください。
参照:「Ggoogle Charts Image Charts - Dynamic Icons」(
https://developers.google.com/chart/image/docs/gallery/dynamic_icons?hl=ja)
"http://chart.apis.google.com/chart ・・・URL
?chst=d_map_pin_letter&chld=A|00FF00|FF0000" ・・・パラメタ
パラメタ:?chst=d_map_spin&chld=1.5|30|FFFF00|13|b|岩槻城址公園
パラメタ
?chst=d_map_pin_icon_withshadow&chld=cafe|FFFF00
パラメタ
?chst=d_bubble_text_small&chld=bb|岩槻城址公園|00FF00|0000FF
パラメタ
?chst=d_fnote&chld=thought|2|00FFFF|h|岩槻城址公園