スタートページJavascript Google Maps Google Maps API の基礎

Google Maps API V3 -マーカーのアイコン変更

マーカーをクリックしたときの動作機能などは、「Google Maps API の機能」で扱いました。ここでは、マーカーのスタイルをカスタマイズします。その例として、マーカー[0](岩槻城址公園)をいろいろ変えてみます。

参照:「Maps Javascript API - Drawing on the Map」( https://developers.google.com/maps/documentation/javascript/overlays?hl=ja


実行例

最初および最初の状態に戻すときに行ないます。

→説明
sample/icon.png
Google提供の画像サンプル(うまくいかない)→説明
http://maps.google.co.jp/mapfiles/ms/icons/rail.png

Google Chartによる指定→説明
ピン形状、色変更と文字挿入→説明
http://chart.apis.google.com/chart
?chst=d_map_pin_letter&chld=A|00FF00|FF0000
ピン形状、サイズや傾きなど→説明
?chst=d_map_spin&chld=1.5|30|FFFF00|13|b|岩槻城址公園
ピン形状、影付き。GoogleChartの図形→説明
?chst=d_map_pin_icon_withshadow&chld=cafe|FFFF00
Bubbles形状、文字を挿入→説明
?chst=d_bubble_text_small&chld=bb|岩槻城址公園|00FF00|0000FF
多様な形状、文字を挿入→説明
?chst=d_fnote&chld=thought|2|00FFFF|h|岩槻城址公園


標準ソースコード

ここでは「地図表示]に青字の追加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で表示しています。

一覧に戻る

mapfiles-icons

Googleは、アイコンのライブラリを提供しています。ここでは「rail.png」を使いました。
  http://maps.google.co.jp/mapfiles/ms/icons/rail.png
restaurantやhospitalなど豊富な種類があります。
参考:「アイコン一覧表」 http://waox.main.jp/news/?page_id=229

一覧に戻る

Google Charts

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

一覧に戻る

ケース1:ピン形状の色変更と文字の挿入

"http://chart.apis.google.com/chart  ・・・URL
 ?chst=d_map_pin_letter&chld=A|00FF00|FF0000"  ・・・パラメタ

chst=アイコン形状=d_map_pin_letter
「d_map_pin_letter」は通常のPIN形状です。他の形状については他のケースで扱います。 PIN形状のchstの主なものを掲げます。
  d_map_pin_icon:PINアイコンだけ。色などを変える。
  d_map_pin_letter:アイコンに文字を入れる。
  d_map_xpin_icon:アイコンに★や画像を入れる。
  d_map_spin:アイコンの大きさを変える。
chld=文字|アイコン色|文字色
  • 文字:アイコンの中央に表示される文字です。1文字(全角、半角でも)です。ここでは「A」と表示されます。
  • アイコン色:アイコンの色です。「00FF00」のように16進数表示にします。blueやredのような指定はできません。
  • 文字色:文字の色です。
一覧に戻る

ケース2:ピン形状、サイズや傾きなど

パラメタ:?chst=d_map_spin&chld=1.5|30|FFFF00|13|b|岩槻城址公園

d_map_spin
アイコンの大きさや傾きなど
chld=大きさ|角度|アイコン色|文字サイズ|文字フォント|文字列行1|行2|・・・
  • 大きさ(1.5):標準を0.5としたときの大きさ
  • 角度(30):反時計回りを正、時計回りを負
  • アイコン色(FFFF00):アイコンの色
  • 文字サイズ(13):文字のサイズ。13px
  • 文字フォント(b):ボールド。通常のフォントなら「_」
  • 文字列(岩槻城址公園):改行するときは、行ごとに「|」で区切る
一覧に戻る

ケース3:ピン形状、影付き。GoogleChartの図形

パラメタ
  ?chst=d_map_pin_icon_withshadow&chld=cafe|FFFF00

chst=d_map_pin_icon
文字を付けないPIN形状アイコン。「_withshadow」により、shadow(影)が付く
chld=0画像|アイコン色
一覧に戻る

Bubbles形状(吹出しのような形状)

パラメタ
   ?chst=d_bubble_text_small&chld=bb|岩槻城址公園|00FF00|0000FF

chst=d_bubble_text_small
bubble_text:吹出しのような形状で、なかに文字列が入ります。
chld=矢印の位置|文字列|アイコン色|文字列色
  • 矢印の位置(bb):アイコンのどこに矢印をつけつかの指定です。
      bbT:矢印なし、bb:左下、bbtr:左上、bbbr:右下、bbtr:右上
      edge_dc:下中央、edge_tc:上中央、edge_lc:左中央、edge_rc:右中央
    矢印の先端ではなく、アイコンの中心がマーカーの位置になるようです。むしろ矢印なしのほうが誤解を防げるようです。
  • この文字列を<a href="sample/joushi-kouen.html">岩槻城址公園</a>のようにしてリンクさせたいと思ったのですが、<a ~を文字列として表示するだけで、うまくいきませんでした。
一覧に戻る

ケース5:多様な形状

パラメタ
  ?chst=d_fnote&chld=thought|2|00FFFF|h|岩槻城址公園

chst=d_fnote
「その他の形状」であり、その形状はchldで指定します。このなかに文字列が入ります。
これらは矢印先端がマーカー位置になるようです。
chld=アイコン形状|大きさ|文字色|文字配置|文字列
一覧に戻る