Google Mapsはデザインを変更する事がよくあります。また、コンテンツが多くある為、自社のコンテンツが埋もれてしまう事も…そんな悩みを感じたことはありませんか？
改めてではありますが、Google Maps APIにはマップのデザインを細かくカスタマイズできる機能が標準搭載されています。色・フォント・ランドマークアイコンの表示・非表示まで、JSONの設定ファイル一つで思い通りのビジュアルに仕上げることができます。
本記事では、Google Mapsのデザイン変更に使える主要な手法を、実装レベルで解説します。地図を使ったサービス開発・運用に携わる方は、ぜひ最後までご覧ください。
Google Mapsデザイン変更の2つのアプローチ
Google Maps APIでデザインを変更するには、大きく分けて2つの方法があります。
- ① Cloud-based styling（クラウドベーススタイリング）：Google Cloud コンソール上でGUIを使って設定。コードを書かずにマップIDと紐付けるだけで反映。
- ② JSONスタイル定義（ローカルスタイリング）：JavaScriptのAPIオプションにスタイル定義を直接記述。細かい制御が可能。
どちらを選ぶかは「チームの技術スタック」と「更新頻度」で決めるのがポイントです。非エンジニアもデザインを更新したいならCloud-based、コードで一元管理したいならJSON定義が向いています。
※当社では、より細かく設定出来る[JSON]での変更をおススメしますが、慣れていないとレイヤーの順番など、混乱する処もあると思います。どこまで制御したいかで変わってくると思います。
① Cloud-based styling — ノーコードで地図の顔を変える
マップIDを発行して紐付けるだけ
Cloud-based stylingはGoogle Cloud Console → Maps Platform → Map stylesから利用できます。手順は次の通りです。
- Google Cloud ConsoleでMap Styleを新規作成する
- スタイルエディタでカラー・表示要素を設定する
- Map IDを発行し、スタイルに紐付ける
- フロント側のAPIオプションに
mapIdを渡す
コードは最小限で済みます。
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6762, lng: 139.6503 },
zoom: 13,
mapId: "YOUR_MAP_ID_HERE" // <-- ここにMap IDを入れるだけ
});変更をコンソール側で保存すれば、コードをデプロイし直さなくても即座にサービス上の地図へ反映されます。デザイン修正のたびにリリースが必要だったワークフローを大幅に短縮できるのが最大のメリットです。
スタイルエディタで変更できる主な要素
- 道路：幹線道路・生活道路・高速道路それぞれの線色・太さ
- ランドマーク：公園・学校・商業施設などのアイコン表示オン/オフ
- 水域・緑地：河川・海・公園の塗り色
- 建物：3D建物の表示有無・色調
- ラベル・テキスト：地名・施設名のフォント色・サイズ
- 交通機関：地下鉄・バス路線の表示オン/オフ
② JSONスタイル定義 — コードで細部まで制御する
スタイル定義の基本構造
JSONスタイリングは featureType（地物の種類）と elementType（要素の種類）の組み合わせで対象を指定し、stylersで見た目を変えます。
const customStyle = [
{
featureType: "road.highway", // 高速道路を対象に
elementType: "geometry", // 形状（線）に対して
stylers: [
{ color: "#2563eb" }, // ブランドカラーの青に変更
{ weight: 2 }
]
},
{
featureType: "poi", // 全ランドマーク（POI）を
elementType: "all",
stylers: [{ visibility: "off" }] // 非表示に
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#bfdbfe" }] // 水域を薄い青に
}
];
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6762, lng: 139.6503 },
zoom: 13,
styles: customStyle // stylesオプションに配列を渡す
});主要な featureType 一覧
administrative：行政境界（国・都道府県・市区町村）landscape：地形・土地利用poi：レストラン・コンビニなどの施設アイコンroad：道路全般（road.highway/road.localなど細分化可）transit：公共交通（駅・バス停など）water：水域
stylers で使える主なプロパティ
color：16進数カラーコード（例:"#1e40af"）visibility："on"/"off"/"simplified"weight：線の太さ（数値）lightness：明度調整（−100〜100）saturation：彩度調整（−100〜100）gamma：ガンマ補正（0.01〜10.0）hue：色相シフト（16進数カラーコードで指定）
スタイル定義を効率化するツール：Snazzy Maps / Google Style Generator
JSONを一から手書きするのは時間がかかります。次のツールを使うとGUI操作でスタイルを組み立て、JSONをそのままコピペできます。
- Snazzy Maps：コミュニティが公開する数千件のプリセットを無料で利用可能。テーマ（ダークモード、シンプル、レトロなど）を選んでJSONをダウンロードするだけ。
- Google Maps Platform Styling Wizard：Googleが公式に提供するGUIエディタ。リアルタイムプレビューで確認しながらスタイルを作成できる。
開発初期のプロトタイプ作成や、デザイナーとのすり合わせフェーズで特に効果を発揮します。まずSnazzy Mapsで近いテーマを見つけ、JSONを微調整するアプローチが最も効率的です。
実践Tips①：ダークモード対応マップの作り方
夜間利用・ダッシュボード組み込みなど、暗い背景にマップを表示したいケースは意外と多いです。ダークモード用スタイルの基本は「全体を暗くしてから道路だけ明るくする」アプローチです。
const darkStyle = [
{ elementType: "geometry", stylers: [{ color: "#212121" }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: "#212121" }] },
{ featureType: "road", elementType: "geometry", stylers: [{ color: "#373737" }] },
{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#3c3c3c" }] },
{ featureType: "water", elementType: "geometry", stylers: [{ color: "#000000" }] }
];Snazzy Mapsで「Dark」タグを検索すると、精度の高いダークテーマが多数見つかるのでおすすめです。
実践Tips②：POIアイコンを非表示にしてシンプルなベースマップを作る
自社の店舗ピンや施設マーカーを目立たせたいとき、デフォルトのPOIアイコンが邪魔になることがあります。次のスタイルで一括非表示にできます。
{ featureType: "poi", elementType: "all", stylers: [{ visibility: "off" }] },
{ featureType: "transit", elementType: "all", stylers: [{ visibility: "off" }] }これだけでコンビニ・飲食店・交通機関のアイコンがすべて消え、自社マーカーだけが際立つクリーンな地図になります。店舗検索・物件検索・配送管理など、特定の目的に特化した地図UIを構築する際の定番テクニックです。
デザイン変更時の注意点
- Map IDとローカルスタイルは併用不可：
mapIdを指定した場合、stylesオプションは無視されます。どちらか一方を使ってください。 - Google Maps Platform の利用規約に注意：地図の視認性を著しく損なう変更や、Googleのロゴを隠す改変は規約違反になる可能性があります。
- スタイルのキャッシュ：Cloud-based stylingの変更反映には数分かかることがあります。即時確認が必要な場合はブラウザキャッシュをクリアしてください。
- モバイルパフォーマンス：複雑なスタイル定義（100要素以上）はレンダリング負荷が上がる場合があります。必要な箇所に絞って定義するのが基本です。
まとめ
Google Mapsのデザイン変更は、Cloud-based stylingとJSONスタイル定義の2本柱で実現できます。
- デザイン更新を素早く・ノーコードで行いたい → Cloud-based styling × Map ID
- コードで精密に制御・バージョン管理したい → JSONスタイル定義
- スタイル作成を効率化したい → Snazzy Maps / Google Styling Wizard を活用
地図のデザインをブランドに合わせることで、ユーザーの離脱を防ぎ、サービスの世界観を一貫して伝えることができます。
エムベースではGoogle Maps API・Mapbox APIを使った位置情報サービスの設計・開発を支援しています。「デザインを変えたいけど実装が不安」「ゼロから地図サービスを立ち上げたい」といったご相談もお気軽にどうぞ。
