「Google Mapを使って現在地から東京駅までのルートを表示するWebページのコード」について、エンジニアとして最初の一歩を踏み出したばかりの方に向けて、やさしく丁寧に解説していきます！

全体の目的と流れ

このHTMLコードの目的は、

「Webページを開くと、現在地から東京駅までのルートが地図上に表示される」

という仕組みを作ることです。

技術的には、以下の要素を組み合わせて動いています：

  1. Google Maps JavaScript API
  2. Geolocation API（現在地取得）
  3. Directions API（ルート表示）

HTMLの構造を見てみよう

<head>の中：必要なリソースを読み込む

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

これは何？

Google Maps JavaScript APIを読み込むスクリプトです。
key=...の部分にGoogle APIキーが入っていて、Googleの地図機能を使うために必要です。

APIキーとは？
Googleなどのサービスをプログラムから使いたいときの「入場チケット」みたいなものです。

<style>タグ：地図の表示サイズ

#map {
  height: 100%;
  width: 100%;
}
  • 地図が画面全体に表示されるように、#mapに高さと幅を100%指定しています。
  • bodyやhtmlにもheight: 100%を指定して、全体を地図に使えるように整えています。

<body>の中：実際の表示部分

パンくずリストのナビゲーション

<nav aria-label="breadcrumb">...</nav>

これはWebページの階層を示す「パンくずリスト（Breadcrumb）」です。
記事の元ページに戻りやすくなっています。

地図の見出しと描画エリア

<h2>現在地から目的地（例として東京駅）までのルートを表示します</h2>
<div id="map"></div>

ここがユーザーに見えるタイトルと地図のエリアです。
<div id="map">の中にGoogleマップが表示されます！

JavaScript部分の解説

ここからが動きの中心部分。JavaScriptで地図を動的に表示し、現在地を取得し、目的地までのルートを描きます。

地図初期化関数 initMap()

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

東京駅の緯度・経度（座標）です。
※緯度（latitude）、経度（longitude）

const map = new google.maps.Map(document.getElementById("map"), {...});

Googleマップをページ内に表示するオブジェクトです。中心座標とズームレベルを指定しています。

const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
  • DirectionsService：ルートの計算をしてくれるサービス
  • DirectionsRenderer：計算したルートを地図に描く描画ツール

現在地を取得する処理

navigator.geolocation.getCurrentPosition(
  (position) => {
    const currentLocation = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    };
    ...
  },
  () => {
    handleLocationError(true, map.getCenter());
  }
);

ここではブラウザのGeolocation APIを使って、ユーザーの現在地を取得しています。

ポイント

  • 現在地は非同期に取得されます（＝ちょっと時間がかかる可能性がある処理）
  • エラー処理もセットで書いてあります

ルートを描く関数 calculateAndDisplayRoute()

directionsService.route({
  origin: start,
  destination: end,
  travelMode: google.maps.TravelMode.DRIVING,
}, ...);
  • origin：出発地（現在地）
  • destination：目的地（東京駅）
  • travelMode：移動手段（ここではDRIVING＝車）

結果が返ってきたら、directionsRenderer.setDirections(response)で地図にルートを表示します。

エラー表示処理 handleLocationError()

もし現在地が取得できなかった場合のメッセージを、地図上に吹き出し（InfoWindow）で表示します。

最後に：ページ読み込み時のトリガー

window.onload = initMap;

ページを開いたときにinitMap()を実行するよう設定しています。

図解：処理の流れ

[ページ読み込み]
       ↓
[initMap()呼び出し]
       ↓
[東京駅の地図表示] ← 中心点
       ↓
[現在地取得]
       ↓
[現在地→東京駅ルート取得]
       ↓
[地図にルート描画]

よくある質問

Q1. なぜAPIキーが必要なの？

→ Googleのサービスを使うには、使用量の制限や利用者の管理のためにAPIキーが必要です。

Q2. スマホでも動く？

→ はい。Geolocation APIはスマホでも使えますが、位置情報の取得許可を求めるポップアップが出る場合があります。

メリット・デメリット

観点メリットデメリット
UX現在地からのルートがすぐに出る位置取得失敗で何も出ない場合あり
実装Googleの機能で短いコードで実現できるAPIキーの管理が必要
応用性他の場所にも簡単に応用できるカスタマイズはJSの理解が必要

今後の学習の指針

これを機に、次のようなトピックにステップアップしていきましょう！

  • Google Maps APIのドキュメントを読む
  • TravelModeを変えて「徒歩」や「公共交通」ルートも試す
  • placesライブラリを使って目的地を自由に選べるUIを作る
  • ReactやVueと組み合わせて地図アプリを作る

「APIを使う」という体験は、現代のWeb開発ではとても重要です。たくさん実験して、失敗して、そこから学んでくださいね！応援しています！

Webアプリケーション制作のための小ネタ集　目次に戻る

マウスではなくショートカットキーで操作したい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる