Googleマップがヌルヌル動く理由とJavaScript

地図は「1枚の画像」ではありません

Googleマップをドラッグすると、地図が滑らかに動きます。
拡大縮小しても一瞬で表示され、ページも切り替わりません。

多くの人はこう感じます。

> 高性能な画像を表示している

実際は違います。
地図は大量の小さな画像の集合体です。

そしてJavaScriptが、それらを並べ替えているだけです。

地図をよく見ると分かるヒント

地図をズームし、読み込み中の瞬間を観察してみると、
四角いブロック単位で表示されていることがあります。

これは「タイル」と呼ばれる仕組みです。

1枚の巨大画像を配信すると、問題が起きます。

• ダウンロードが遅い
• メモリを大量消費
• 拡大時にぼやける

そこで地図は分割されています。

例えば 256px × 256px の画像を
碁盤の目のように敷き詰めています。

JavaScriptがしている仕事

地図をドラッグしたとき、
JavaScriptは「現在の表示位置」を計算します。

map.addEventListener("mousemove", (e)=>{
  offsetX += e.movementX;
  offsetY += e.movementY;
  moveTiles(offsetX, offsetY);
});

ここで重要なのは、
地図画像を描き直していないことです。

位置をずらしているだけです。

.tile {
  position: absolute;
  transform: translate(x, y);
}

表示しているタイルを移動させて、
新しく必要になった部分だけ追加読み込みします。

なぜスクロールしないのか

普通のページはスクロールで移動します。
地図は違います。

理由は「ページの中に仮想空間を作っている」からです。

地図はWebページではなく、
ページの上に載ったアプリケーションです。

ブラウザのスクロール機能は使っていません。
JavaScriptがマウス操作を直接処理しています。

これをドラッグ操作と言います。

ズームが速い理由

拡大縮小時、地図は再描画していません。
別解像度のタイルに切り替えています。

流れはこうです。

• 低解像度タイルを拡大表示
• 裏で高解像度タイルを取得
• 読み込み完了後に差し替え

ユーザーは「すぐ表示された」と感じますが、
実際には二段階表示です。

非同期通信の塊

地図表示は1回のアクセスではありません。
移動するたびにサーバーへリクエストが送られます。

つまり、ドラッグ中ずっと通信しています。

• 新しいタイル要求
• キャッシュ確認
• 画像取得

すべてJavaScriptが管理しています。

なぜこんな仕組みが必要か

もし地図を1ページとして作るとどうなるでしょう。

• 日本全体を表示 → 数GB
• スクロールで再読み込み → 遅い
• 拡大 → 再取得

実用になりません。
そこで「必要な部分だけ取得する」方式になっています。

実はキャッシュが重要

一度表示した場所へ戻ると、すぐ表示されます。
これはブラウザキャッシュです。

タイル画像は保存され、再ダウンロードされません。
滑らかに感じる理由の一つです。

注意点：実はかなり重い処理

滑らかに見えますが、
裏では大量の処理が行われています。

• 位置計算
• 通信制御
• 描画更新
• メモリ管理

古いPCで地図が重いのはこのためです。
画像の問題ではなく、JavaScriptの処理量です。

まとめ：地図はWebページではなくWebアプリ

Googleマップは単なるページではありません。

• タイル画像の管理
• 非同期通信
• DOM操作
• イベント処理

すべてが同時に動いています。

地図がヌルヌル動くのは、高速な画像だからではありません。
JavaScriptがリアルタイムで画面を組み立てているからです。

Webは文章を表示する仕組みから、
アプリケーションを動かす環境へ変わっています。

地図はその最も分かりやすい例です。