2025.08.26

【2025年版】Google Maps JavaScript API カスタマイズ解説（マーカー・経路・配色）

みなと

WebサイトにGoogleマップを掲載する機会は多くありますが、実際の案件ではこんな要望を受けることも少なくありません。

地図の配色をブランドに合わせたい
マーカーの見た目を変えたい
経路を視覚的にわかりやすく表示したい

こうしたニーズに応えるには、Google Maps JavaScript APIを使った柔軟なカスタマイズが有効です。

この記事では、次のようなカスタマイズを盛り込んだ実用的な地図の作り方を紹介します。

カスタムHTMLで作る吹き出しマーカー
点線で描く経路表示
地図の配色を自由にカスタマイズ
スマホ表示にも最適化されたズーム調整

コードと設定の流れをまとめてあるので、手を動かしながら試すのにちょうどいい内容です。どこがポイントなのかも丁寧に紹介しているので、初めての方でも安心です。

また今回は、2025年現在のGoogle公式仕様に沿った最新の書き方（importLibrary ベースのライブラリ読み込みや AdvancedMarkerElement の活用など）を採用しており、今後の保守性や拡張性にも配慮した内容となっています。

それでは、実際のマップとカスタマイズ内容を見ていきましょう！

APIキーの取得や基本設定がまだの方は、まずこちらの記事からどうぞ。

完成マップをデモで確認

今回の記事で目指す完成形は、以下のようなカスタマイズ済み Google マップです。

出発地は「東京駅丸の内駅舎」
目的地は「皇居桜田門」
地図の配色はモノクロ基調
経路は点線で視覚的に表示
各地点には吹き出し付きのオリジナルマーカーを設置

この地図では、主に以下のようなカスタマイズを加えています。

吹き出し付きのカスタムマーカー
出発地と目的地に、HTML＋CSSで作った吹き出しスタイルのマーカーを設置。色やサイズ、文字の見せ方などを自由に調整できます。

点線で引かれた経路
Googleマップの Polyline 機能を使い、実線ではなく点線でルートを表示。線の色や大きさ、間隔も自由に調整できます。

配色をカスタマイズ
Google Cloud の管理画面で地図の配色（背景・道路・ランドマークなど）を編集。サイトのデザインになじむように細かくカスタマイズできます。

スマホでは少し引いたズームで表示
モバイル表示時でもマーカーや地図全体が画面にうまく収まるよう、初期ズームを調整しています。

スワン

今回のようなマップのカスタマイズは、会社や店舗の「アクセス案内」や、イベント会場の道順など、実務での活用シーンがとても多いです。

マップ IDと地図のスタイルの作成

ここからは、実際に Cloud Console 上でマップ ID と地図のスタイルを作成する手順を見ていきましょう。

マップ IDを作成する

まずは Google Maps Platform の管理ページにアクセスします。左メニューから 「マップ管理」 をクリックし、画面中央の 「マップ ID を作成」 を押します。

マップ ID の作成画面が開きます。任意の名前を入力し、地図の種類は「JavaScript」 を選択。さらに 「ベクター」 にチェックを入れて保存してください。名前は自分が管理しやすいもので問題ありません。例：「会社案内マップ」「店舗アクセス用」など。

「ベクター」を選ぶのは、ズームや回転に滑らかに対応でき、将来的なカスタマイズにも適しているためです。
また「チルト」や「ローテーション」は 3D 表示や地図の回転を有効にするオプションですが、通常の案内マップには不要なので今回はオフのままで問題ありません。

マップ ID が発行されました。ここで表示されている ID を、のちほどコードに指定することでスタイルを適用できるようになります。

地図のスタイルを作成して適用する

続いて地図のスタイルを作成します。左メニューから 「地図のスタイル」 を選び、「地図のスタイルを作成」 をクリックします。

ベースとなるデザインを選択します。ライト または ダーク をクリックし、必要であれば モノクロ にチェックを入れてください。その後、「カスタマイズ」 をクリックして詳細設定に進みます。

詳細設定画面では、スポットや道路、行政地区などの対象を一つひとつカスタマイズできます。右側のプレビュー地図を見ながら、表示／非表示や色の調整を自由に行いましょう。

設定が終わったら、スタイルに名前を付けて保存します。名前は自由に付けられますが、どのような配色や用途なのかが分かる名前にしておくと便利です（例：「店舗案内用モノクロ」「イベント会場ライト版」など）。

保存したスタイルは「マップ管理」から適用できます。「スタイルを変更」 をクリックし、先ほど作成したスタイルを選びましょう。

選択したスタイルがマップ ID に適用されました。最後に 「保存」 を押せば完了です。

完成マップのコード全体を確認

このセクションでは、完成版のコード一式を掲載します。デモでは東京駅から皇居までを結ぶ点線の経路を、モノクロ基調の地図に表示し、各地点には吹き出し付きマーカーを設置しています。

これはあくまでサンプルなので、出発地や目的地、デザインや配色は自由に変更して、自分のサイトに合った地図を作ってみてください。

スワン

コード内には理解しやすいように解説コメントも細かく入れています。安心して読み進めてみてください！

このコードを動かすには、事前に APIキーを取得しておく必要があります。まだの方は、前回の記事をご覧ください。

HTMLコード

まずは HTML です。地図を表示するためのコンテナ要素と、Google Maps JavaScript API を読み込むためのスクリプトを記述します。

<!-- 地図を描画するコンテナ。高さはCSSで指定します -->
<div id="map"></div>

<!--
  Google Maps JavaScript API の読み込みスクリプト
  - key: Google Cloud で発行した API キーを指定してください
  - v: 利用するバージョン。特に理由がなければ "weekly" のままで大丈夫です
  この読み込みで、JavaScript 側から google.maps.importLibrary(...) が使えるようになります
-->
<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
  });
</script>

CSSコード

次に CSS です。地図の高さを指定するほか、出発地・目的地に設置する吹き出し付きマーカーのデザインをスタイルで定義しています。

/* 地図の表示サイズ。用途に応じて高さを調整 */
#map {
  height: 400px;
}

/* 吹き出しの共通スタイル */
.gm-marker {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 90px;
  border-radius: 4px;
  padding: 10px;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  opacity: 0.9;
  transform: translate(-50%, calc(-100% - 9px)); /* 下辺の中央（しっぽ先）を座標に合わせる */
}

/* しっぽ（三角形） */
.gm-marker::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

/* 出発地：グレー */
.gm-marker.is-origin,
.gm-marker.is-origin::after {
  background: #333;
}

/* 目的地：ピンク */
.gm-marker.is-dest,
.gm-marker.is-dest::after {
  background: #c11a51;
}

/* タイトルと補足 */
.gm-marker-ttl {
  font-size: 16px;
  font-weight: 700;
}
.gm-marker-sub {
  font-size: 12px;
}

JavaScriptコード

最後に JavaScript です。地図の初期設定、出発地と目的地のマーカー表示、点線の経路描画など、今回のカスタマイズのメイン処理をまとめています。

(async () => {
  /* =========================
    設定
    ========================= */
  const MAP_ID = "YOUR_MAP_ID"; // Cloud Console で作成した Map ID
  const ORIGIN = { lat: 35.68161639653227, lng: 139.7659836669028 }; // 出発地（東京駅 丸の内駅舎）
  const DEST = { lat: 35.67873264334677, lng: 139.7539475644177 }; // 目的地（皇居 桜田門）
  const LINE_COLOR = "#4466ce"; // 経路（点線）の色
  const DEFAULT_ZOOM = 15; // PC画面の初期表示の拡大レベル
  const MOBILE_ZOOM = 14; // スマホ画面（幅<=767px）の初期表示の拡大レベル

  // 出発地から目的地までの経路を緯度経度で並べた配列。先頭と末尾は ORIGIN / DEST を参照
  const ROUTE_PATH = [
    ORIGIN,
    { lat: 35.681447596348015, lng: 139.76568243615668 },
    { lat: 35.68166854762714, lng: 139.76473604511614 },
    { lat: 35.681341723643264, lng: 139.7646623739573 },
    { lat: 35.68255234663561, lng: 139.75941472039182 },
    { lat: 35.678160873774395, lng: 139.75658121403032 },
    { lat: 35.67787449661019, lng: 139.75617370031335 },
    DEST
  ];

  /* =========================
    ライブラリ読み込み（新方式）
    ========================= */
  const { Map, Polyline } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  /* =========================
    マップ生成
    - 初期表示の拡大レベルは matchMedia で初期判定
    - center は ORIGIN/DEST の中点
    ========================= */
  const map = new Map(document.getElementById("map"), {
    zoom: window.matchMedia("(max-width: 767px)").matches ? MOBILE_ZOOM : DEFAULT_ZOOM, // 地図の拡大レベル（数値が大きいほど拡大）
    center: {
      lat: (ORIGIN.lat + DEST.lat) / 2,
      lng: (ORIGIN.lng + DEST.lng) / 2
    }, // 地図の初期表示位置（中心座標）
    mapId: MAP_ID, // 使用するマップスタイルのID（Cloud Consoleで発行）
    zoomControl: true, // ズームボタンの表示（+ / -）
    cameraControl: false, // 新しいカメラコントロールUIの表示（ズーム＋上下左右移動）
    mapTypeControl: false, // 地図/航空写真などの切替UIの表示
    scaleControl: false, // 縮尺バーの表示（1kmスケールなど）
    streetViewControl: false, // ストリートビュー用アイコンの表示（人型）,
    clickableIcons: false // ランドマークや建物クリック時の吹き出しの表示
  });

  /* =========================
    吹き出し（HTMLマーカー）
    ========================= */
  function createMarker(big, small, className) {
    const el = document.createElement("div");
    el.className = `gm-marker ${className}`;
    el.innerHTML = `
      <div class="gm-marker-ttl">${big}</div>
      <div class="gm-marker-sub">${small}</div>
    `;
    return el;
  }

  const markerOrigin = createMarker("東京駅", "丸の内駅舎", "is-origin");
  const markerDest = createMarker("皇居", "桜田門", "is-dest");

  // 出発地点のカスタムマーカーを追加
  new AdvancedMarkerElement({
    map, // 表示する対象の地図オブジェクト
    position: ORIGIN, // マーカーを置く緯度経度
    content: markerOrigin, // 吹き出しHTML要素（カスタムマーカーの中身）
    collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
    // 重なり時の表示優先度：駅名ラベル等よりこのマーカーを優先表示
  });

  new AdvancedMarkerElement({
    map, // 表示する対象の地図オブジェクト
    position: DEST, // マーカーを置く緯度経度
    content: markerDest, // 吹き出しHTML要素（カスタムマーカーの中身）
    collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
    // 重なり時の表示優先度：駅名ラベル等よりこのマーカーを優先表示
  });

  /* =========================
    点線の経路（Polyline.icons を使用）
    - 実線は描かず、等間隔のドットを並べる
    ========================= */
  new Polyline({
    map, // 表示する地図オブジェクト
    path: ROUTE_PATH, // 経路となる座標の配列（始点〜終点）
    strokeOpacity: 0, // 実線は非表示
    icons: [{ // 線の上に繰り返し配置するアイコン設定
      icon: {
        path: google.maps.SymbolPath.CIRCLE, // 丸いシンボルを使用
        fillColor: LINE_COLOR, // 丸の塗りつぶし色
        fillOpacity: 1, // 塗りつぶしの不透明度（1で不透明）
        strokeColor: LINE_COLOR, // 枠線の色
        strokeOpacity: 1, // 枠線の不透明度
        scale: 2 // 丸の大きさ
      },
      repeat: "12px" // 丸を12px間隔で繰り返して配置 → 点線風に見せる
    }]
  });

})();

実装ポイントをひとつずつ解説

ここからは、完成コードの中でも押さえておきたいポイントを、順番に解説していきます。マップの生成、マーカーの設置、経路の表示といった実装の要所を切り出して、それぞれの仕組みやカスタマイズ方法を見ていきましょう。

ポイント1：マップ生成とズーム調整

地図を表示する際の中心位置やズームレベルは、new Map の初期設定で指定します。

const ORIGIN = { lat: 35.68161639653227, lng: 139.7659836669028 }; // 出発地（東京駅 丸の内駅舎）
const DEST = { lat: 35.67873264334677, lng: 139.7539475644177 }; // 目的地（皇居 桜田門）

const DEFAULT_ZOOM = 15; // PC画面の初期表示の拡大レベル
const MOBILE_ZOOM = 14; // スマホ画面（幅<=767px）の初期表示の拡大レベル

const map = new Map(document.getElementById("map"), {
  zoom: window.matchMedia("(max-width: 767px)").matches ? MOBILE_ZOOM : DEFAULT_ZOOM, // 地図の拡大レベル（数値が大きいほど拡大）
  center: {
    lat: (ORIGIN.lat + DEST.lat) / 2,
    lng: (ORIGIN.lng + DEST.lng) / 2
  }, // 地図の初期表示位置（中心座標）
  mapId: MAP_ID, // 使用するマップスタイルのID（Cloud Consoleで発行）
  zoomControl: true, // ズームボタンの表示（+ / -）
  cameraControl: false, // 新しいカメラコントロールUIの表示（ズーム＋上下左右移動）
  mapTypeControl: false, // 地図/航空写真などの切替UIの表示
  scaleControl: false, // 縮尺バーの表示（1kmスケールなど）
  streetViewControl: false, // ストリートビュー用アイコンの表示（人型）,
  clickableIcons: false // ランドマークや建物クリック時の吹き出しの表示
});

ここでのポイントは以下の通りです。

ズームレベル（zoom）

matchMedia を利用して、画面幅に応じてズームを切り替えています。PC では 15 に設定していますが、同じズーム値だとスマホではマーカーがはみ出してしまうため、スマホでは 14 に下げています。実際には 表示を確認しながら適切なズーム値に調整するのが安心です。

中心位置（center）

出発地と目的地の緯度・経度の平均値をとって、ちょうど中間点を表示。複数地点を扱うときによく使う手法です。

緯度・経度の取得方法

Google マップ上で目的地を右クリック → メニューの最上部に緯度・経度が表示されます。その数値をコピーして、コード内の ORIGIN / DEST の定義部分に設定すれば、任意の地点を出発地や目的地として指定できます。

UI コントロール類

ストリートビューや縮尺バーなどの UI は、利用シーンによって必要性が異なります。今回のコードではシンプルにズームボタンだけ残しましたが、用途に応じてオン／オフを調整してください。

ポイント2：カスタムマーカーの作成

今回のコードでは、AdvancedMarkerElement を使い、HTML と CSS で自由にデザインできるマーカーを実装しています。

マーカー部分は以下の 2 ステップに分かれます。

HTML要素を生成

この関数では、マーカーに表示する内容を HTML として自由に組み立てています。

function createMarker(big, small, className) {
  const el = document.createElement("div");
  el.className = `gm-marker ${className}`;
  el.innerHTML = `
    <div class="gm-marker-ttl">${big}</div>
    <div class="gm-marker-sub">${small}</div>
  `;
  return el;
}

const markerOrigin = createMarker("東京駅", "丸の内駅舎", "is-origin");
const markerDest = createMarker("皇居", "桜田門", "is-dest");

ここで使っている el.innerHTML の部分には、今回のようにタイトルと補足を分けた要素だけでなく、任意の HTML を記述できます。画像やアイコンを入れたり、案件に応じて柔軟にカスタマイズ可能です。

また、付与されたクラス名を使えば、CSS 側で「出発地」「目的地」など用途に応じて色や装飾を自由に切り替えられます。

AdvancedMarkerElement で地図に配置

生成した HTML 要素は、AdvancedMarkerElement を使って地図上に配置します。

new AdvancedMarkerElement({
  map, // 表示する対象の地図オブジェクト
  position: ORIGIN, // マーカーを置く緯度経度
  content: markerOrigin, // 吹き出しHTML要素（カスタムマーカーの中身）
  collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
  // 重なり時の表示優先度：駅名ラベル等よりこのマーカーを優先表示
});

new AdvancedMarkerElement({
  map, // 表示する対象の地図オブジェクト
  position: DEST, // マーカーを置く緯度経度
  content: markerDest, // 吹き出しHTML要素（カスタムマーカーの中身）
  collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
  // 重なり時の表示優先度：駅名ラベル等よりこのマーカーを優先表示
});

ここで注目したいのは collisionBehavior の指定です。これは 「他のラベルやアイコンと重なったときに、このマーカーをどう扱うか」 を制御するプロパティです。

デフォルトは REQUIRED で、他のマーカーと重なっていても常に表示されます。

一方で、OPTIONAL_AND_HIDES_LOWER_PRIORITY を指定すると、他の要素と重なった場合に、このマーカーを優先的に表示し、重なった下位の要素（ランドマーク名や駅ラベルなど）を隠す挙動になります。

実務では、今回のように目的地など限られたマーカーを優先的に表示したいケースは多くあります。そうした場合は、OPTIONAL_AND_HIDES_LOWER_PRIORITY を指定することで、他のラベルやアイコンより自作マーカーを優先できるため、おすすめの設定です。

ポイント3：点線で描く経路

経路を描画するには Polyline を使います。もっともシンプルなのは「実線」で、以下のように数行の設定だけで表示できます。

new Polyline({
  map,
  path: ROUTE_PATH,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

しかし今回のように「点線」にしたい場合は、一工夫が必要です。まず strokeOpacity: 0 を指定して 実線を非表示にし、その上で icons[] プロパティを使って 丸いシンボルを一定間隔で並べる仕組みを作ります。

new Polyline({
  map, // 表示する地図オブジェクト
  path: ROUTE_PATH, // 経路となる座標の配列（始点〜終点）
  strokeOpacity: 0, // 実線は非表示
  icons: [{ // 線の上に繰り返し配置するアイコン設定
    icon: {
      path: google.maps.SymbolPath.CIRCLE, // 丸いシンボルを使用
      fillColor: LINE_COLOR, // 丸の塗りつぶし色
      fillOpacity: 1, // 塗りつぶしの不透明度（1で不透明）
      strokeColor: LINE_COLOR, // 枠線の色
      strokeOpacity: 1, // 枠線の不透明度
      scale: 2 // 丸の大きさ
    },
    repeat: "12px" // 丸を12px間隔で繰り返して配置 → 点線風に見せる
  }]
});

経路座標の配列について

経路は、出発地から目的地までの複数の座標を並べて配列にしたものです。先ほどと同様に、Google マップで地点を右クリックして緯度・経度を取得し、それを順番に書き足していけば OK です。

const ROUTE_PATH = [
  ORIGIN,
  { lat: 35.681447596348015, lng: 139.76568243615668 },
  { lat: 35.68166854762714, lng: 139.76473604511614 },
  // ... 必要に応じて座標を追加
  DEST
];

こうして配列を作っておくことで、Polyline がその道順に沿って線を描画してくれます。

Google マップには Directions API を使って自動で経路を引く方法もありますが、今回のように「デザイン重視の点線」や「自分の意図に沿った経路」を作りたい場合は、手動で座標を指定する方がコントロールしやすい場面も多いです。