Googleマップのスタイル集を使って簡単にカスタマイズするコツ

BiNDupではGoogleマップパーツを貼り付けることで、簡単に地図を設定できることはご存知の方も多いかと思います。
デザインもスタンダードなもの以外にもおしゃれなデザインが予め用意されており、さらに拘りたい方には自由に色や設定をカスタマイズできるようになっているので、サイトのクオリティアップに役立っていることでしょう。

しかし自分でデザインをカスタマイズ、結構大変だったりしないでしょうか？

過去（Googleマップをカスタマイズしてスタイリッシュな地図を作る）にもカスタマイズの方法を解説してきたりしていますが、細かく設定するほど思うような色合いにならない悩みなど、きっとあるのではないかと。

そこで今回はこのGoogleマップパーツをより簡単にカスタマイズする方法を見つけましたのでご案内したいと思います。

Google Mapのスタイルテンプレート集を参考にする

さぁ、いざ「Googleマップをカスタマイズしよう！」と思っても中々難しいもの。
何となく色は決まっているけど、実際の見た目が想像できなかったり、どこまで手を入れていいかわからなかったり、どこでどう設定するのかもよくわからないなど・・・。

そんな方におすすめなのがこちらのサイト。
色味や明るさ、タグなどでいろいろなGoogleマップのデザインを探すことができます。

テンプレートまとめサイト

メニューの「Explore styles」からサンプル一覧へ。サイト上部のプルダウンや、タグからデザインを探せます。

参考デザインからBiNDのGoogleマップパーツに反映させる

お好みのデザインが決まったら、実際にGoogleマップパーツにも利用してみましょう。手順はとても簡単です。

参考デザインから設定値を抽出

1.使用したいデザインを選び、右タブの「Customize」を選択。今回はこちらの赤色を使用してみます。

2.「Customize」を選択すると、カスタマイズ画面に。画面右タブ「View code」を開き、画面左の表示されているコードを全てコピー。

ここでの作業はこれで終わりです。次にBiNDに移ります。

Googleマップパーツに適用

1.Googleマップパーツを開き、編集画面へ。画面右の「▼」ボタンから「json」、さらに「インポート」を選択します。

2.「インポート」を選択すると入力画面が表示されるので、ここに先ほどコピーしたコードを貼り付けて、適用。

するとあっという間に参考デザインに。

実はこのサイトただデザインを眺めるだけではなく、選んだデザインを元にカスタマイズもできます（サイトが英語なのでカスタマイズについては省略します・・・）ので、少しカスタマイズをしてからGoogleマップパーツに適用してみてもいいかもしれません。

Googleマップの標準デザインで妥協していた方は、ぜひお試しください。

BiNDupを無料で使ってみる

BiNDでGoogleマップをご利用の皆様へ

GoogleマップAPIの仕様変更について

Googleマップは、2018年7月17日にAPIの仕様が変わり、表示可能なGoogleマップのアクセス数が変更になりました。
APIには、アプリユーザー全体で共有できる「共有APIキー」と、ユーザー個人がGoogle社で取得し利用する「個別APIキー」の2パターンがあり、Googleマップパ―ツを組み込む際に「共有APIキー」をご利用の場合、サイトで地図が表示されなくなります。
8月10日（金）までに、Google社の提供する「個別APIキー」を取得し、ご自身のサイトに設定いただくなどの対応をお願いいたします。対処方法など、詳しくは以下をご確認ください。

＜サポートサイト＞
【更新/重要】8月10日よりGoogle Mapが共有APIでは表示されなくなります