GoogleMapを掲載する方法

WebサイトにGoogleMapを掲載すると、店舗や事務所の場所がすぐに分かり、ユーザーにとって便利になります。
特にアクセスページや会社概要ページでは欠かせない機能です。
ここでは、初心者でもそのまま実践できるように、GoogleMapを埋め込む具体的な手順をわかりやすく説明します。

GoogleMapを掲載する基本手順

ページにGoogleMapを載せる方法は、GoogleMapが提供する埋め込みコード（iframe）をコピーして貼り付けるだけです。
専門知識がなくても簡単に実装できます。

GoogleMapで埋め込みコードを取得する手順

まずは、GoogleMap側で埋め込みコードを取得します。
この作業ができれば、サイトへ地図を表示する準備が整います。

ここで手に入るコードが、Webページに貼り付けるための地図データです。
コードはそのまま使えるので、特別な編集は必要ありません。

Webサイトに埋め込みコードを貼り付ける手順

次に、取得したコードをサイトへ貼り付けます。
WordPressでもHTMLサイトでも手順はほぼ同じです。

▼ WordPressの場合

▼ HTMLサイトの場合

この作業だけで、ページ内にGoogleMapが表示されます。

GoogleMapを正しく表示させるポイント

地図のサイズやレイアウトを調整すると、より見やすくなります。
特にアクセスページでは、スマートフォン対応が欠かせません。

地図のサイズを調整する

埋め込みコードには width と height が含まれています。
ここを変更すると、希望のサイズに調整できます。

例）

幅を「100%」にすると、スマホでも横幅いっぱいに広がり、見やすく表示されます。
高さは「350〜450px」程度が使いやすいです。

ページ速度に影響しないようにする

GoogleMapは少し読み込みが重い場合があります。
そのため、iframe に loading=”lazy” をつけて遅延読み込みにすると安心です。

例）

これだけで、ページ表示が軽くなることが多いです。

GoogleMapを掲載する際の注意点

地図の位置がずれているとユーザーが迷ってしまいます。
間違いを避けるため、次の点をチェックしてください。

表示された位置が正しいか確認する

GoogleMapのピンが、実際の住所と一致しているかを必ず確認します。
特にビルのテナントの場合は、住所が共有になっていることがあります。

必要に応じて、自分でピンを正しい場所へドラッグできます。

著作権・利用規約を守る

GoogleMapは埋め込みOKですが、スクリーンショットを画像として保存し、勝手に加工して利用するのは禁止されています。
必ずGoogleが提供する「埋め込み機能」を使いましょう。

まとめ：GoogleMapの掲載は初心者でも簡単

GoogleMapの埋め込みは、専門知識がなくても数分で完了します。

これだけで、ユーザーにとって便利なアクセスページが作れます。