Google Mapsのクリック地点へルート検索するコードを新人エンジニア向けに解説｜API取得が前提であることを理解しよう

(Sample)

こんにちは。ゆうせいです。

今回は、Google Mapsを使って「現在地から、地図上でクリックした目的地までの車ルートを表示するコード」を、新人エンジニア向けに解説します。

最初に、かなり大事なことを言います。

このコードは、HTMLとJavaScriptだけを保存すれば必ず動くコードではありません。

Google Maps PlatformのAPIキーを取得し、必要なAPIを有効化し、課金設定を済ませ、APIキー制限を正しく設定していることが前提です。

ここを飛ばすと、どれだけJavaScriptのコードが正しくても地図は表示されません。

Google公式ドキュメントでも、Maps JavaScript APIを使うには、請求先アカウントとMaps JavaScript APIが有効なプロジェクトが必要だと説明されています。また、APIキーはGoogleの請求先アカウントやプロジェクト、特定のAPIと関連付ける一意の文字列であり、本番利用前に制限することが強く推奨されています。

このコードでできること

このコードは、次のような動きをします。

ページを開く
        ↓
Google Mapsを読み込む
        ↓
現在地の取得をブラウザに依頼する
        ↓
現在地に「現」マーカーを置く
        ↓
ユーザーが地図をクリックする
        ↓
クリック地点に「目」マーカーを置く
        ↓
ルート検索ボタンを押す
        ↓
現在地から目的地までの車ルートを地図に描く

スマホの地図アプリでたとえるなら、「今いる場所を出発地にして、地図をタップした場所まで車で行くルートを表示する」機能です。

ただし、地図の表示も、ルート検索も、自分のPCの中だけで完結しているわけではありません。

Google Maps APIという外部サービスにアクセスして、地図やルート計算機能を使わせてもらっています。

API取得が前提になる理由

このコードで一番重要な部分は、次のscriptタグです。

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

元コードでは、key=の後ろに実際のAPIキーが書かれています。

ただし、記事やGitHub、研修資料に実際のAPIキーをそのまま載せるのは避けてください。

公開されたAPIキーは第三者に使われる可能性があります。

Google公式ドキュメントでも、APIキーにはアプリケーション制限やAPI制限を設定し、不正なリクエストからアプリケーションを守ることが推奨されています。Webサイトで使う場合はHTTPリファラー制限を設定できます。

新人エンジニアは、まず次のことを強く覚えてください。

Google Mapsを使う
        ↓
Google Maps PlatformのAPIキーが必要
        ↓
対象APIの有効化が必要
        ↓
課金設定が必要
        ↓
APIキー制限が必要
        ↓
そのうえで初めてコードが動く

コードだけでは足りません。

APIを取得して使える状態にしておくことが前提です。

たとえるなら、このHTMLとJavaScriptは「車」です。

APIキーは「高速道路のETCカード」です。

車があってもETCカードが使えなければ、高速道路であるGoogle Mapsのサービスを通れません。

このコードで使っているAPIやブラウザ機能

Google Maps JavaScript APIのDirectionsServiceでは、DirectionsServiceオブジェクトを作成し、route()を呼び出してルートサービスへのリクエストを開始します。取得したルート結果はDirectionsRendererを使って地図に描画できます。

現在地取得に使うGeolocation APIは、ユーザーの許可が必要です。また、MDNでは、getCurrentPosition()は端末の現在位置を取得するメソッドであり、保護されたコンテキスト、つまり通常はHTTPS環境が必要だと説明されています。

このコード全体の役割

元コードは、大きく分けると次の4つでできています。

HTMLは画面の骨組みです。

CSSは見た目の調整です。

JavaScriptは地図を動かす頭脳です。

Google Maps APIは外部の地図機能です。

この4つが組み合わさって、地図クリックによるルート検索が実現されています。

API読み込み部分の解説

コードの先頭付近に、次のようなscriptタグがあります。

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
</script>

この行で、Google Maps JavaScript APIを読み込んでいます。

key=YOUR_API_KEYの部分には、自分で取得したAPIキーを入れます。

libraries=placesは、Placesライブラリを読み込む指定です。

ただし、今回のコードでは、地図クリックで目的地を選んでいるだけなので、Placesライブラリは実質的には使っていません。

施設名検索や住所入力補完を使うなら、Placesライブラリが役立ちます。

新人エンジニアがよく勘違いするポイントがあります。

scriptタグを書けばGoogle Mapが無料で無制限に使えるわけではありません。

APIキー取得、API有効化、課金設定、APIキー制限が前提です。

この前提を忘れないでください！

CSSの役割

CSSでは、html、body、#map、.control-areaを設定しています。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

htmlとbodyのheightを100%にしています。

地図を画面いっぱいに近いサイズで表示するためです。

marginとpaddingを0にしているので、ブラウザ標準の余白を消しています。

#map {
  height: 70%;
  width: 100%;
}

#mapは、地図を表示するエリアです。

height: 70%なので、画面の高さの70%を地図に使います。

width: 100%なので、横幅いっぱいに表示されます。

.control-area {
  padding: 10px;
}

.control-areaは、見出しやボタンが入っている操作エリアです。

paddingを付けることで、文字やボタンが画面端にくっつかないようにしています。

CSSは、地図アプリの「レイアウト調整係」です。

地図機能そのものではありませんが、見やすい画面にするために大切です。

画面のHTML部分

bodyには、操作エリアと地図エリアがあります。

<div class="control-area">
  <h2>現在地から、地図で選んだ目的地までのルートを表示します（車）</h2>
  <p class="text-muted mb-2">地図をクリックして目的地を選び、「ルート検索」を押してください。</p>
  <button class="btn btn-primary" onclick="searchRoute()">ルート検索</button>
</div>
<div id="map"></div>

buttonにはonclick="searchRoute()"が書かれています。

このボタンを押すと、JavaScriptのsearchRoute関数が実行されます。

div id="map"は、Google Mapを表示する場所です。

JavaScript側では、次のようにこのdivを指定しています。

document.getElementById("map")

つまり、HTMLのid="map"とJavaScriptのgetElementById("map")がつながっています。

グローバル変数の役割

scriptの最初に、次のような変数があります。

let map;
let directionsService;
let directionsRenderer;
let currentLocation;
let currentMarker;
let destinationLatLng;
let destinationMarker;

これらは、複数の関数から使いたい情報です。

そのため、関数の外側に置いています。

変数は、アプリの状態を覚えておくメモ帳です。

現在地、目的地、地図、マーカーなどを後で使うために保存しています。

initMap関数の役割

initMap関数は、地図の初期化を行う関数です。

function initMap() {
  const tokyoStation = { lat: 35.681236, lng: 139.767125 };
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: tokyoStation
  });
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  directionsRenderer.setMap(map);
  map.addListener("click", function (event) {
    setDestination(event.latLng);
  });
  // 現在地取得処理へ続く
}

最初に、東京駅の座標を仮の中心にしています。

const tokyoStation = { lat: 35.681236, lng: 139.767125 };

なぜ仮の中心が必要なのでしょうか。

現在地取得は、ユーザーの許可や端末の状態によって時間がかかる場合があります。

そのため、現在地が取得できる前でも地図を表示できるように、ひとまず東京駅を中心にしています。

その後、現在地が取得できたらmap.setCenter(currentLocation)で現在地中心に移動します。

new google.maps.Mapの意味

次の部分で、地図を作っています。

map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: tokyoStation
});

このコードは、「idがmapのdivに、Google Mapを表示してください」という意味です。

zoomは、地図の拡大率です。

14は、駅周辺や街区が見やすいくらいの倍率です。

もっと広い範囲を見たいなら、12や10に下げます。

もっと細かく見たいなら、16や17に上げます。

DirectionsServiceとDirectionsRendererの違い

このコードでは、ルート検索のために2つの部品を使っています。

directionsService = new google.maps.DirectionsService();

directionsRenderer = new google.maps.DirectionsRenderer({
  suppressMarkers: true
});
directionsRenderer.setMap(map);

DirectionsServiceは、ルート計算をGoogleに依頼する部品です。

DirectionsRendererは、計算されたルートを地図に描く部品です。

DirectionsServiceだけでは、ルートは計算されても地図には線が出ません。

DirectionsRendererだけでは、描くべきルート情報がありません。

この2つがセットで動くことで、ルート検索と地図上の描画ができます。

suppressMarkers: trueとは何か

DirectionsRendererを作るとき、次の設定があります。

suppressMarkers: true

この設定は、DirectionsRendererが自動で出す出発地A、目的地Bのマーカーを表示しないという意味です。

今回のコードでは、自分で現在地マーカーと目的地マーカーを置いています。

label: "現"

label: "目"

そのため、Google Maps側の自動マーカーまで表示されると、マーカーが重なって見づらくなります。

suppressMarkers: trueにより、ルートの線だけを表示し、マーカーは自前で管理しています。

地図クリックで目的地を選ぶ仕組み

次の部分で、地図クリックを検知しています。

map.addListener("click", function (event) {
  setDestination(event.latLng);
});

map.addListenerは、地図上で起きた操作を監視する処理です。

ここでは、clickイベントを監視しています。

event.latLngには、クリックした場所の緯度・経度が入ります。

つまり、ユーザーが地図をクリックすると、その地点の座標をsetDestination関数へ渡しています。

教室の座席でたとえるなら、「今クリックした机の位置を目的地として記録する」ような処理です。

現在地取得の仕組み

現在地取得は、次の部分で行っています。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      currentLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(currentLocation);

      currentMarker = new google.maps.Marker({
        position: currentLocation,
        map: map,
        label: "現",
        title: "現在地"
      });
    },
    function () {
      handleLocationError(true, map, map.getCenter());
    }
  );
} else {
  handleLocationError(false, map, map.getCenter());
}

navigator.geolocationは、ブラウザが持っている現在地取得機能です。

getCurrentPositionは、現在地を1回取得するメソッドです。

現在地が取得できると、position.coords.latitudeとposition.coords.longitudeから緯度・経度を取り出します。

Geolocation APIは、ユーザーの位置情報を扱います。

そのため、ブラウザはユーザーに許可を求めます。

ユーザーが拒否すると、現在地は取得できません。

また、本番環境ではHTTPSが必要だと考えてください。MDNでも、Geolocation APIは保護されたコンテキストでのみ利用でき、プライバシー上の理由からユーザーの許可が求められると説明されています。

setDestination関数の役割

setDestination関数は、地図をクリックした地点を目的地として保存し、目的地マーカーを置く関数です。

function setDestination(latLng) {
  destinationLatLng = latLng;

  if (destinationMarker) {
    destinationMarker.setPosition(latLng);
  } else {
    destinationMarker = new google.maps.Marker({
      position: latLng,
      map: map,
      label: "目",
      title: "目的地"
    });
  }
}

まず、クリックされた座標をdestinationLatLngに保存しています。

destinationLatLng = latLng;

この値は、あとでルート検索の目的地として使います。

次に、すでに目的地マーカーがあるかどうかを確認しています。

if (destinationMarker) {
  destinationMarker.setPosition(latLng);
}

すでに目的地マーカーがある場合は、新しくマーカーを作らず、位置だけ動かします。

まだ目的地マーカーがない場合は、新しく作ります。

destinationMarker = new google.maps.Marker({
  position: latLng,
  map: map,
  label: "目",
  title: "目的地"
});

この書き方により、地図を何度クリックしても目的地マーカーが増え続けません。

1つの目的地マーカーが移動するだけです。

これは良い設計です。

もし毎回new google.maps.Markerだけを書いていたら、クリックするたびに目的地マーカーが増えて、地図がピンだらけになります。

searchRoute関数の役割

searchRoute関数は、ルート検索ボタンを押したときに実行されます。

function searchRoute() {
  if (!currentLocation) {
    window.alert("現在地を取得できていません。位置情報の許可を確認してください。");
    return;
  }

  if (!destinationLatLng) {
    window.alert("地図をクリックして目的地を選んでください。");
    return;
  }

  directionsService.route(
    {
      origin: currentLocation,
      destination: destinationLatLng,
      travelMode: google.maps.TravelMode.DRIVING
    },
    function (response, status) {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else if (status === "ZERO_RESULTS") {
        window.alert("車での経路が見つかりませんでした。別の地点を選んでください。");
      } else {
        window.alert("ルート検索に失敗しました: " + status);
      }
    }
  );
}

この関数では、まずルート検索できる状態か確認しています。

現在地がなければ、出発地がありません。

目的地がなければ、到着地がありません。

出発地と目的地がそろって初めて、ルート検索できます。

このチェックはとても大切です。

ルート検索は、出発地と目的地がそろわないと実行できません。

タクシーに乗って「どこからどこまで行きますか？」が決まっていない状態では走れないのと同じです。

directionsService.routeの中身

ルート検索の本体は、次の部分です。

directionsService.route(
  {
    origin: currentLocation,
    destination: destinationLatLng,
    travelMode: google.maps.TravelMode.DRIVING
  },
  function (response, status) {
    if (status === "OK") {
      directionsRenderer.setDirections(response);
    }
  }
);

originは出発地です。

destinationは目的地です。

travelModeは移動手段です。

travelModeを変えると、移動手段を変えられます。

徒歩ルートにしたい場合は、次のように変更できます。

travelMode: google.maps.TravelMode.WALKING

ただし、移動手段によっては地域や経路によって結果が返らないこともあります。

そのため、ZERO_RESULTSなどのエラー処理が必要です。

statusの意味

DirectionsService.routeの結果では、statusを見ています。

if (status === "OK") {
  directionsRenderer.setDirections(response);
} else if (status === "ZERO_RESULTS") {
  window.alert("車での経路が見つかりませんでした。別の地点を選んでください。");
} else {
  window.alert("ルート検索に失敗しました: " + status);
}

statusは、ルート検索の結果を表す文字列です。

OKの場合だけ、次の処理でルートを描画します。

directionsRenderer.setDirections(response);

このresponseには、Googleが計算したルート情報が入っています。

directionsRendererが、そのルート情報を地図上に線として表示します。

handleLocationError関数の役割

現在地が取得できなかった場合、handleLocationError関数が呼ばれます。

function handleLocationError(browserHasGeolocation, map, pos) {
  const infoWindow = new google.maps.InfoWindow();
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "現在地を取得できませんでした。位置情報の許可を確認してください。"
      : "このブラウザは現在地取得に対応していません。"
  );
  infoWindow.open(map);
}

InfoWindowは、地図上に吹き出しのような案内を表示する部品です。

browserHasGeolocationがtrueなら、ブラウザは現在地取得に対応しているが、取得に失敗したという意味です。

falseなら、そもそもブラウザがGeolocationに対応していないという意味です。

現在地取得は、必ず成功するわけではありません。

ユーザーが許可しない場合、PCの位置情報が無効な場合、HTTPSでない場合などは失敗します。

失敗する前提でエラー処理を書くことが、Webアプリでは大切です。

window.onload = initMapの意味

最後に、次のコードがあります。

window.onload = initMap;

これは、ページの読み込みが完了したらinitMap関数を実行するという意味です。

もしページ読み込み前に地図を作ろうとすると、id="map"のdivがまだ存在しない可能性があります。

そのため、HTMLの読み込みが終わってから地図を初期化しています。

たとえるなら、教室が完成する前に机を並べようとしても置けません。

まず教室であるHTMLを用意し、その後に地図という机を配置します。

このコードを動かすために必要な準備

新人エンジニア向けに、必要な準備を整理します。

特にAPIキー取得と有効化は必須です。

このコードは、Google Maps APIを呼び出しているコードです。

APIが使える状態になっていないと、地図表示もルート検索もできません。

HTMLファイルをダブルクリックしても動かない場合、JavaScriptの文法より前に、APIキー、API有効化、課金設定、キー制限、ブラウザのConsoleエラーを確認してください。

実際のAPIキーを公開してはいけない

APIキーは完全な秘密情報ではありません。

ブラウザで使う以上、ユーザー側から見えます。

だからこそ、隠すだけではなく、使えるサイトと使えるAPIを制限することが大切です。

このコードでPlacesライブラリは必要か

元コードでは、次のようにlibraries=placesが指定されています。

libraries=places

しかし、今回のコードでは地図をクリックして目的地を選んでいます。

施設名検索や住所の自動補完は使っていません。

そのため、今回の機能だけならlibraries=placesは必須ではありません。

次のようにしても、基本的な地図表示とルート検索の学習はできます。

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>

Placesを使うのは、たとえば次のような機能を追加したいときです。

APIは使えば使うほど便利になりますが、必要な機能だけ有効にするのが基本です。

APIキー制限でも、使うAPIだけを許可するようにしましょう。

新人エンジニアが改変しやすいポイント

このコードは、いくつかの部分を変えるだけで機能を改変できます。

たとえば、徒歩ルートにしたい場合は、次のように変えます。

travelMode: google.maps.TravelMode.WALKING

地図をもっと大きくしたい場合は、CSSを変えます。

#map {
  height: 85%;
  width: 100%;
}

最初から大改造するのではなく、1か所変えて、動作確認してください。

コードの改変は料理の味見と同じです。

塩も砂糖も醤油も一度に変えると、何が原因で味が変わったのかわからなくなります。

よくあるエラーと確認ポイント

ブラウザのDevToolsを開き、Consoleを必ず見てください。

Google Maps APIの読み込みエラー、APIキーエラー、JavaScriptの文法エラーはConsoleに出ることが多いです。

画面だけ見て悩まないでください。

DevToolsを使え！

安全に研修で使うための注意点

新人研修でこのコードを使う場合は、次のルールを決めておくと安全です。

APIキーは「ただの文字列」ではありません。

利用量や課金と結びつく認証情報です。

研修だからといって、制限なしのキーを配ってはいけません。

このコードをさらに良くするなら

学習用としては十分ですが、実務に近づけるなら改善できる点があります。

たとえば、目的地の緯度・経度を画面に表示すると、クリックした地点がどの座標なのか学習しやすくなります。

<p id="destinationText">目的地はまだ選択されていません。</p>

document.getElementById("destinationText").textContent =
  "目的地: " + latLng.lat() + ", " + latLng.lng();

このように少しずつ改変していくと、Google Maps API、イベント、DOM操作、変数の使い方が身につきます。

まとめ

このコードは、Google Maps JavaScript APIを使って、現在地から地図クリックで選んだ目的地までの車ルートを表示するサンプルです。

ただし、最大の前提はAPI取得です。

APIキーがない、Maps JavaScript APIが有効でない、請求先アカウントがない、APIキー制限が誤っている。このような状態では、コードが正しくても動きません。

一言でまとめるなら、このコードは「Google Maps APIを使って、現在地とクリック地点をもとにルート検索するコード」です。

新人エンジニアは、まずGoogle Maps APIの取得手順、APIキー制限、DevToolsのConsole確認、Geolocation API、DirectionsService、DirectionsRenderer、地図クリックイベントを順番に学ぶとよいです。次の学習では、移動手段をselectで選べるようにしたり、クリック地点の緯度・経度を画面に表示したりして、APIを使った地図アプリを少しずつ自分で育てていきましょう！