会社概要ページのアクセス地図は、CSSで2.5°だけ右に回転させています。本記事では、その前提となる2つの問い——道路はなぜ真北に沿っていないのか、Web地図はなぜ「北が上」で固定されているのか——を各種公式資料で整理したうえで、回転に対応していないGoogleマップの埋め込みをCSSで傾ける方法を解説します。

比較のため、まず手を加えていない素の埋め込みを示します。会社概要ページの地図と同じ中心・同じズームで、回転だけがない状態です。中央の赤いピンが弊社の所在地で、その上に押上駅（東京スカイツリー）、下に錦糸町駅が並びます。

▲ 回転していない素のGoogleマップ（北が上）

道路は真北に沿っていない

冒頭の地図で、押上と錦糸町のあいだを縦に結んでいるのが「タワービュー通り」、その途中を東西に横切っているのが「春日通り」です。OpenStreetMapで道路の両端の座標を取り方位角を計算すると、この2本は

  • タワービュー通り — 北から西へ約3.5°
  • 春日通り — 東西から約3.2°

だけ傾いています。このため、押上と錦糸町を縦に収める構図では、構図の軸となるタワービュー通りが画面に対してわずかに傾いて見えます。

傾きの由来 — 磁北ではなく、江戸の運河

方位の基準には、自転軸の方向を指す「真北」と、方位磁石が指す「磁北」の2つがあります。国土地理院の磁気図によれば、東京付近の偏角（真北と磁北のずれ）は西へ約7度。今回の約3.5°はこの値と一致しないため、磁石を基準に街路が引かれたわけではありません。

理由は街区の成り立ちにあります。街路は天文学的な方位ではなく、地形・水系・既存の街道を基準に引かれるのが一般的です。このあたり——墨田区南部の旧本所地区は、明暦の大火（1657年）を機に開拓された新興地で、碁盤の目のような町並みと縦横に流れる水路は、このときの計画的な開発に由来します（墨田区の資料）。タワービュー通りが沿って走る大横川親水公園も、この開発で開削された運河・横川の跡地です。つまり道路の約3.5°の傾きは、江戸期に設定された方眼が真北からわずかにずれていたことの、370年ごしの名残といえます。

地図が「北が上」で固定されている仕組み

Googleマップの2D地図は、メルカトル図法で地球を正方形の平面に投影し、ズームレベルごとにあらかじめ分割した画像（タイル）を配信して表示する仕組みです（Map and Tile Coordinates）。タイルは北を上にして描き出された既成の画像であるため、この方式の地図には「回転」という操作がそもそも存在しません。実際、Maps Embed APIのドキュメントを見ても、地図モードで指定できるのは中心（center）・ズーム（zoom）などに限られ、向きのパラメータはありません（heading が指定できるのはストリートビューモードのカメラの向きだけです）。

一方、Maps JavaScript APIのベクター地図は、タイル画像ではなく図形データをクライアント側で描画するため、setHeading() による回転・傾きに対応しています。ただしAPIキーの取得と課金設定が前提です。キー不要の埋め込みを使う静的サイトでは、地図データそのものは回せません。そこで、表示だけをCSSで回転させることにしました。

CSSで表示を回転させる

結果から示します。次の地図は、冒頭と同じ埋め込みをCSSで2.5°回転させたものです。中央を縦に走るタワービュー通りが、画面の縦軸とほぼ平行になっています。

▲ CSSで2.5°回転させた埋め込み。冒頭の素の地図と見比べると、道路が画面の縦横に揃っています

実装は次のような構造で、外枠の要素とiframeだけで完結します。上の地図にもこのCSSをそのまま適用しています（会社概要ページでは同じことをTailwind CSSのクラスで書いています）。

.map-frame {
  position: relative;
  height: 500px;
  overflow: hidden;      /* はみ出した四隅を切り落とす */
  border-radius: 12px;
}
.map-frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;           /* ひと回り大きくしておく */
  height: 120%;
  transform: translate(-50%, -50%) rotate(2.5deg);
}

ポイントは3つです。

外枠は回さず、中身だけ回す — 角丸や罫線のある外枠はそのままに、内側のiframeだけを transform の rotate() で回転させます。

iframeをひと回り大きくしておく — 長方形をそのまま回転させると、四隅に三角形の隙間ができて背景が覗きます。幅 w・高さ h の枠を角度 θ の回転後も隙間なく覆うために必要な大きさは、回転の座標変換から幅 w·cosθ + h·sinθ、高さ w·sinθ + h·cosθ と求められます。当サイトの枠はおよそ幅740px・高さ500pxなので、θ = 2.5°（sin θ ≈ 0.044）では幅に約22px（+3%）、高さに約32px（+7%）で足りる計算です。実装では余裕をみて幅110%・高さ120%としています。

外枠の overflow: hidden で切り抜く — 大きくして回した分のはみ出しは外枠で切り落とします。枠の中には、道路が画面の縦横に揃った地図だけが残ります。

なお、CSSの変換は文書のレイアウトに影響せず、描画とポインタのヒットテストに適用されます（CSS Transforms Module Level 1）。そのため回転後もiframe内のドラッグやズームは通常どおり機能し、座標の変換はブラウザが処理します。

回転角について、実測値どおり3.5°回せばタワービュー通りは画面と完全に平行になりますが、地図中の文字を含む全体の傾きが知覚されにくい範囲として、当サイトでは2.5°を採用しました。

補足 — 地図の構図について

弊社（墨田区横川）は押上駅と錦糸町駅のほぼ中間にあり、道案内ではこの2駅を目印にしています。会社概要ページの地図が両駅を1画面に収める構図なのはそのためです。構図の軸となるタワービュー通り（弊社が面するのは、その一本東の道です）を画面の縦軸に揃える目的で、2.5°の回転を加えています。

まとめ

  • 道路の約3.5°の傾きは磁気偏角（東京では西へ約7度）とは別のもので、明暦の大火後に運河を骨格として区画された本所の碁盤目が、真北からわずかにずれていることに由来します
  • Webの2D地図はメルカトル図法で描いた「北が上」のタイル画像を配信する仕組みのため、ラスター方式の埋め込みには回転の操作がありません（ベクター地図の setHeading() は回転に対応）
  • iframeをCSSの transform で回転させ、w·cosθ + h·sinθ に基づいてひと回り大きくし、外枠の overflow: hidden で切り抜けば、見た目の向きだけを調整できます
  • 採用した回転角は2.5°です（実測3.5°に対し、地図全体の傾きの知覚されにくさを優先）

回転の効果は、この記事の冒頭の素の埋め込みと、「CSSで表示を回転させる」の節の回転後の埋め込みを見比べてご確認いただけます。実運用の例は会社概要ページの地図で、同じ回転にグレースケール表示などの装飾を加えたものです。

参考