Site icon Tips Note by TAM

Google Maps APIs Styling Wizard を使って カスタマイズしたマップを使う

kojima

サイトでGoogle Mapを埋め込む時に、マップの色が浮いてしまったり、表示される項目が多すぎてわかりづらくなってしまう事もあると思います。
その際、マップの色や、表示される項目を調整できるのがGoogle Maps APIs Styling Wizardです。


Googleのツールなのですが日本語化されてないせいか、なかなか使い方が見つからなかったので、簡単な流れを共有したいと思います。

ベーシックな表示項目の調整をする

まず、表示する予定地周辺の地図を表示し、デフォルトでの見え方をみてみます。

右上の検索エリアに入れればすぐに出てきます。

次に、左カラムで大まかな表示項目の調整をします。

Theme(テーマ) … 大まかな色のルールを選びます。
※テーマによって表示項目のルールが違うようなので、先に選ぶのをおすすめします

Themeの上のfeaturesから表示項目の密度を調整します。

  • Roads … 道路名や一方通行マークの表示を調整
  • Landmarks … お店や機関のマークの表示を調整
  • Labels … お店名や機関名の表示を調整

※この3つの項目は連動しているので、お店のマークが消えれば店名も自動的に消えるようです

細かく調整をする

MORE OPTIONS よりさらに細く指定します。

項目が英語なので、ざっくり日本語ではこんな感じです。

値を調整する時に、

  1. Allもしくはそれぞれの項目を選び
  2. さらに以下の中からどれを調整するか選び
    • All … その項目全て
    • Geometry … 図形とか
    • Labels … 文字の部分
  3. その中で何を変更するかを決めます
    • Fill … 塗り
    • Stroke / Outline …枠線の色や太さどれを変更するか選べます ※文字のText Outlineなどは全ての項目が反応する訳ではないようです
  4. 表示項目の調整や色を調整します。 Visibility（表示項目）の4択は以下のような感じです。
    • inherit … テーマのルールを引き継ぐ
    • hidden … 非表示
    • simplified … 表示（文字の外側に枠ナシ）
    • shown … 表示（文字の外側に枠アリ）

のような順で変更します。

実際に調整してみましょう

  • All > Geometry（図形）- Fill（塗り） > Color で背景色を入ます。
  • Points of interest（特定の場所） > All（全て） > shown（表示）で表示項目を増やします。

書き出したJSONを貼り付けて完成

思ったような見え方に調整したらFINISHを押すと、JSONが書き出されます。
※URLも書き出されるので、こちらでも実装可能と思いますが、今回はJSONでやってみます。

カスタマイズしたgoogle mapを埋め込む

  1. 弊社石川の記事を参考にしてAPIを取得
  2. Google Maps JavaScript APIを読み込む際に、パラメーターのkeyの値としてAPIキーを指定。 
    
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3D%E3%80%90API%E3%82%AD%E3%83%BC%E3%82%92%E3%81%93%E3%81%93%E3%81%AB%E6%8C%87%E5%AE%9A%E3%80%91%26callback%3DinitMap%22%20async%20defer%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  3. 実際に簡単な地図をサイト上に表示してみます。 地図を埋め込む場所を指定します。 
    
<div id="sample"></div>
  4. 地図のサイズをCSSで指定します。 
    #sample {
width: 700px;
height: 400px;
}
  5. JavaScriptで地図を埋め込む記述を追加します。 initMap()を使って（1.）で埋め込んだAPIの前に地図を埋め込む記述をする。 styleの後ろにコピーしたJSONをペーストして終わりです。 
    function initMap() {
        var map = new google.maps.Map(document.getElementById('sample'), {
          center: {lat: 34.70194, lng: 135.510025},
          zoom: 18,
          styles: [
// styles の後ろに書き出されたJSONをペースト
  ]
   });
}
    実際のソースコード一式はこちらをご確認ください。

今回使用したのは、Styling Wizardですが、
他にも、

Snazzy Maps Snazzy Mapsは、ウェブデザイナーや開発者を対象としたGoogleマップ向けのさまざまなカラースキームのリポジトリです。

などでも簡単にカスタムスタイルを使用できるので、ぜひ使ってみてください！

関連記事はこちら

Google Maps APIを使って、サイト上に地図を表示するまでの流れ
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる