Google Mapsの色をデザインにマッチさせるカスタム配色

まめわざではGoogle Mapsを利用した地図を簡単に設定・設置できます。
地図はこれまで周辺の影や文字の大きさなどを装飾できましたが、地図の中身の配色も選べるようになりました。
ここではカスタム配色の使い方を説明します。

カスタム配色とは?

地図の中身がこのように変わります。

いつものGoogle Mapsの配色
グレー
パステル
青(濃)

配色はまめわざのオリジナル*で、グレー・白・黒・コッテリ・レトロ・パステル・緑・肌色・青・赤・緑(濃)・肌色(濃)・青(濃)・赤(濃)を用意しております
*レトロは「Styling Wizard: Google Maps APIs」の配色を参考にしています。

カスタム配色のメリット・デメリット

  • メリット
    ホームページのデザインに、よりマッチした色や雰囲気が選べます
  • デメリット
    少し見づらくなります

まめわざでは、見づらくなるデメリットに対して、3つの対策をとっています。

  • 左上のボタンでいつものGoogle Mapsの配色に戻せます
  • スポット(観光地・地名・道路名・鉄道名など)のアイコンや説明の表示を隠さずに表示
  • 見慣れたいつものピンを使用

カスタム配色の使い方

まずは通常通り地図ブロックを追加します。
地図は、新ブロックの「▼もっと」で「場所・時間」を選んだ際に表示される「地図」から追加できます。

下部に表示される「カスタム配色」で地図の配色を選択します。

追加説明)
地図ブロックでは、「現在地にピン」をクリックすると、赤丸の地点にピンが置かれます。ピンは無制限に複数配置できます。
ピンをクリックすると小窓が表示され、ピンの説明を入力できます。また「ピンを削除」ボタンでピンを削除できます。
ピンはドラッグで位置を調整できます。
ピンを自ら配置した場合、地図の中心に自動でピンが配置される機能は動作しません。

2017/12/22