Googleマップカスタムフィールドプラグインを使った一覧地図でStyledMapを使う

GoogleMapsカスタムフィールドプラグインに対し、「一覧地図でStyledMapを使って、見た目をカスタマイズしたい」というご質問をいただきました。
その方法を紹介します。

1.一覧地図を表示するための作業

一覧地図を表示するには、Movable Typeのテンプレートの書き換え等の作業を行います。
まだ作業を行っていない方は、以下の記事を参考に書き換えを行ってください。

Googleマップカスタムフィールドプラグインを使った一覧地図の作成(前半)
Googleマップカスタムフィールドプラグインを使った一覧地図の作成(後半)

2.many_marker_gmap.jsのダウンロード

StyledMapを使うには、地図表示のJavaScript（many_marker_gmap.js）を差し替え、またその内容を書き換えます。
まず、many_marker_gmap.jsをダウンロードします。

many_marker_gmap.jsのダウンロード

3.スタイル適用先の指定

StyledMapでは、通常の地図にスタイルを適用したり、通常の地図とは別にスタイル適用後の地図を用意して、地図の右上で切り替えられるようにしたりすることができます。

通常の地図とは別にスタイル適用後の地図を表示できるようにしたい場合は、many_marker_gmap.jsの12行目を以下のように書き換えます。

書き換え前

var isOverwrite = false;

書き換え後

var isOverwrite = true;

また、13行目の「スタイル名」の箇所を、スタイル適用後の地図のスタイル名に置き換えます。
例えば、通常の地図と「駅」という地図を切り替えられるようにしたい場合、13行目を以下のように書き換えます。

なお、通常の地図にスタイルを適用する場合は、12行目と13行目を書き換える必要はありません。

var styleName = '駅';

4.スタイルの定義

次に、15行目の「// ここにスタイル定義を挿入」という部分に、スタイルを定義するJavaScriptを挿入します。
StyledMap Wizardを使って地図をカスタマイズし、「Show JSON」のボタンをクリックすると、JavaScript（JSON）のコードが出力されます。
そのコードの先頭の「[」と、最後の「]」の間をコピーして、「// ここにスタイル定義を挿入」のところに貼り付けます。

例えば、駅名を濃い青で表示するようにカスタマイズしたい場合、15行目の前後を以下のようにします。

var styles = [
  {
    "featureType": "transit.station.rail",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#000080" }
    ]
  }
];

5.JavaScriptの差し替え

ここまでが終わったら、many_marker_gmap.jsを、文字コードをUTF-8にしてファイルに保存します。
そして、many_marker_gmap.jsをサーバーにアップロードし、既存のmany_marker_gmap.jsと置き換えます。

6.書き換えの例

駅名の文字の色を変える例をご用意しました。
many_marker_gmap.jsを書き換える際の参考にご利用ください。

書き換えの例のダウンロード

お知らせ