はじめに
概要
本資料は「ホームページに地図を埋め込む」方法を分かりやすくまとめたガイドです。Google Mapを中心に、地図の埋め込み手順、目的地やルートの表示、航空写真の挿入、表示サイズの調整、そしてオリジナル地図を作るGoogleマイマップの使い方までを網羅します。実例を交えて説明しますので、初めての方でも取り組みやすい構成です。
本資料で学べること
- ホームページに地図を埋め込む基本手順
- 特定の場所やルートを分かりやすく表示する方法
- 航空写真（衛星写真）の埋め込み方法
- 埋め込み後の見た目・サイズ調整のポイント
- Googleマイマップでオリジナル地図を作る手順
想定読者
- 自店舗や事務所の所在地をサイトに載せたい方
- イベントやツアーの行き先を案内したい方
- ホームページ作成を担当する初心者〜中級者
進め方と注意点
各章で手順を示し、画面操作の具体例やHTMLの挿入例を紹介します。地図の表示はブラウザやスマホで見え方が変わりますので、埋め込み後は必ず実機で確認してください。また、地図サービスの利用規約や表示要件に注意しながら進めます。
Google Mapをホームページに埋め込むメリット
訪問者にとっての利便性
ホームページに地図を埋め込むと、訪問者がそのまま拡大・縮小や移動で周辺を確認できます。例えば飲食店なら駐車場や最寄り駅を簡単に確認でき、初めての来店でも不安が減ります。
信頼感の向上
所在地がはっきり示されることで、企業や店舗の信頼感が高まります。住所だけの記載より現地の様子が伝わり、口コミや写真も見られるため安心感につながります。
来訪を促す効果
経路表示や徒歩・車での所要時間が分かるため、来店やイベント参加のハードルが下がります。予約フォームや電話リンクと合わせれば、行動につながりやすくなります。
スマホでの操作性と滞在時間の増加
スマホから操作できる点は大きな利点です。ページ内で地図を触れると滞在時間が伸び、ほかの情報も見てもらいやすくなります。
他サービスとの連携が簡単
営業時間や写真、口コミといった情報がそのまま表示されます。さらに、周辺の施設を表示して近隣の魅力を伝えることもできます。
Google Mapで目的地を表示する方法
概要
Google Mapで目的地を埋め込む手順は4ステップです。場所を検索し、表示を確認し、共有メニューから「地図を埋め込む」を選び、埋め込みコードを取得します。サイズは小（400×300px）、中（600×450px）、大（800×600px）、カスタムが選べます。
1. 場所を検索
ブラウザでGoogle Mapを開き、検索欄に店名や住所、目標のランドマークを入力します。正確な候補が出たらクリックしてピン（マーカー）が表示されていることを確認します。
2. 表示を確認
地図のズームや表示位置を調整します。ストリートビューや周辺表示を見せたい場合はズームで最適な範囲にしておきます。モバイルでの見え方も確認すると安心です。
3. 共有メニューを選ぶ
画面左上のメニューか共有ボタンをクリックし、「地図を埋め込む（Embed map）」を選びます。ここで表示されるプレビューが、埋め込まれる見た目です。
4. 埋め込みコードを取得する
サイズオプション（小・中・大・カスタム）を選んでから、表示されたiframeコードをコピーします。コピーしたコードを自分のホームページのHTMLに貼り付ければ完了です。
サイズとカスタム設定
標準の小・中・大のほか、カスタムで幅と高さをpx単位で指定できます。レスポンシブにしたい場合はwidth=”100%”にし、高さは450px前後を目安にします。
注意点
- 場所が見つからない場合は緯度経度を使う方法もあります。
- 埋め込みはGoogleの利用規約に準じます。APIキーは通常不要ですが、高度な機能を使う場合は検討してください。
ルート表示を追加する方法
概要
最寄り駅やバス停から目的地までのルートを地図に表示する方法を、初心者向けにわかりやすく説明します。出発地点や駅の出口を指定すると、さらに正確な案内が可能です。
手順（簡単）
- Google マップを開き、目的地を検索します。例：「○○カフェ」など。
- 「経路」ボタンを押します。
- 出発地点を入力します。最寄り駅の名前やバス停、住所で入力できます。駅の場合は改札や出口名（例：北口）を追記すると便利です。
- 移動手段（徒歩、車、公共交通機関、自転車）を選び、表示されたルートを確認します。
埋め込み用コードの取得
経路が表示された状態で、画面の共有メニューから「地図を埋め込む（Embed）」を選び、表示されたHTMLのiframeコードをコピーします。ホームページのHTMLに貼り付けるだけでルート付きの地図を表示できます。
サイズと見た目の調整
iframeのwidthとheight属性を変更すると表示サイズを変えられます。スマホ表示を意識するなら幅を100%にすると見やすくなります。
移動時間の扱い
表示される所要時間は交通状況や信号、待ち時間により変わります。目安として案内し、余裕を持った行動を促してください。
よくある問題と対処
- 経路が表示されない：ブラウザの共有メニューで経路がアクティブか確認してください。
- 出発地点の誤差：駅出口や目印を具体的に書くと迷いにくくなります。
必要なら、ウェブサイトに合わせた具体的な埋め込みコード例も用意します。
航空写真を埋め込む方法
概要
Google マップの航空写真（衛星写真）をホームページに埋め込むと、周辺の様子や建物の配置が分かりやすくなります。地図表示を「地図」から「航空写真／衛星写真」に切り替えた上で、共有用の埋め込みコードを取得します。
手順（かんたん4ステップ）
- Google マップを開き、表示したい地点を検索します。
- 右下または左上の表示切替で「航空写真（衛星表示）」に切り替えます。見え方が変わったら位置とズームを調整します。
- 画面のメニューから「共有」→「地図を埋め込む」を選びます。プレビューで航空写真になっているか確認してください。
- 表示されたiframeコードをコピーして、自分のHTMLに貼り付けます。幅や高さは後で調整できます。
注意点
- 埋め込みは簡単ですが、商用利用や大量アクセスの場合はGoogleの利用規約やAPIの利用が必要になることがあります。必ず確認してください。
- 埋め込み後はスマートフォンでの見え方を確認してください。iframeの幅を100%にし、CSSでレスポンシブ対応すると見やすくなります。
具体例（コピーして使える例）
以下は基本的なiframeの例です。srcのURLは取得したコードに置き換えてください。
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
このコードをHTMLに貼り、widthやheightを調整すると航空写真表示の地図がページに表示されます。簡単な手順で視覚的に分かりやすい地図を提供できます。
埋め込み後のサイズ調整方法
はじめに
埋め込みコード内のwidthとheightを変えるだけで地図の見え方を簡単に調整できます。ここでは代表的な方法を丁寧に説明します。
1. 埋め込みコードを直接編集する
最も手軽な方法です。例：
<iframe src="..." width="100%" height="300" style="border:0;" allowfullscreen></iframe>
- 横幅は”px”か”%”で指定できます。横幅を100%にすると親要素の横幅いっぱいに広がります。
- 縦幅はピクセル指定がわかりやすいです（例：300px）。heightを%にすると親要素の高さが決まっていないと効きません。
2. レスポンシブ対応（横幅に合わせて縦横比を保つ）
スマホなどで崩れないようにするにはラッパー要素を使います。例：
<div class="map-wrap">
<iframe src="..." frameborder="0" allowfullscreen title="地図"></iframe>
</div>
<style>
.map-wrap{width:100%;height:0;padding-bottom:56.25%;position:relative}
.map-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
</style>
- padding-bottomで縦横比を指定します（16:9は56.25%）。
- 親幅に合わせて高さが自動計算されるため見た目が安定します。
3. CSSのaspect-ratioを使う（モダンブラウザ向け）
簡潔に書けます。
.map{width:100%;aspect-ratio:16/9}
.map iframe{width:100%;height:100%;border:0}
4. 固定サイズやサイドバー用の調整
サイドバーに置く場合は幅と高さを固定します。
.sidebar .map{width:300px;height:400px}
5. 画面幅による細かな調整（メディアクエリ）
小さな画面では高さを低くするなど調整します。
@media (max-width:600px){
.map{aspect-ratio:4/3}
}
補足（実務での注意点）
- heightを%で指定する場合は親要素の高さが明確に設定されている必要があります。
- iframeにtitle属性を付けてアクセシビリティを高めてください。
- 表示が崩れる場合はブラウザのキャッシュをクリアして再確認してください。
Googleマイマップの活用
新規作成とタイトル設定
Googleマイマップは簡単に自分だけの地図を作れます。画面右下の「CREATE（作成）」をクリックし、地図のタイトルと説明を入力します。ベースマップ（標準・航空写真など）もここで選べます。
地点の登録方法
1) 検索して追加：検索欄に店名や住所を入力し、表示された候補を「地図に追加」します。2) マーカーで追加：地図上でマーカーアイコンを選び、任意の位置をクリックして直接追加します。各地点に名前・説明・写真を付けられます。CSVやKMLをインポートして一括登録も可能です。
レイヤーとカスタマイズ
レイヤーでカテゴリ別に分けると整理しやすいです。マーカーの色やアイコンを変更し、線や面を描いてルートやエリアを示せます。色分けやラベルで見やすさを工夫しましょう。
共有とホームページへの埋め込み
共有設定で公開範囲を決め、リンクを知らせます。サイトに載せるにはメニューの「地図を埋め込む」で表示されるiframeコードをコピーし、HTMLに貼り付けます。横幅や高さはiframe属性で調整し、スマホ対応はレスポンシブ用のラッパーを使うと便利です。
活用例と注意点
店舗一覧、観光ルート、イベント会場案内などに役立ちます。個人情報の扱いや写真の権利に注意し、編集権限を必要な人だけに限定してください。スマホでも編集できるため現地での更新が容易です。
