「Google Mapを使って現在地から東京駅までのルートを表示するWebページのコード」について、エンジニアとして最初の一歩を踏み出したばかりの方に向けて、やさしく丁寧に解説していきます！
全体の目的と流れ
このHTMLコードの目的は、
「Webページを開くと、現在地から東京駅までのルートが地図上に表示される」
という仕組みを作ることです。
技術的には、以下の要素を組み合わせて動いています：
- Google Maps JavaScript API
- Geolocation API（現在地取得）
- 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開発ではとても重要です。たくさん実験して、失敗して、そこから学んでくださいね！応援しています！