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