「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%指定しています。
  • bodyhtmlにも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開発ではとても重要です。たくさん実験して、失敗して、そこから学んでくださいね!応援しています!

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