Google マップをホームページに埋め込むことは、訪問者に対して地理的な情報を提供する効果的な方法です。
このプロセスは、Google マップの共有機能を使用し、生成されたHTMLコードをウェブページのHTMLファイルに挿入することで行います。
以下に詳細な手順を説明します。
目次
Google マップの埋め込みコードを取得する
- Google マップを開く: まず、Google マップを開き、埋め込みたい場所を検索します。
- 共有オプションにアクセス: 検索結果で目的の場所を選択した後、左側のメニュー（または場所のカード）で「共有」または場所の名前をクリックし、「共有」オプションにアクセスします。
- 「地図を埋め込む」を選択: 「共有」オプションの中に、「地図を埋め込む」または「埋め込みマップ」タブがあります。このタブを選択します。
- HTMLコードをコピー: 提示されたHTMLコード（iframeタグ）を全てコピーします。このコードが、ウェブページにGoogleマップを埋め込むために使用します。
HTMLファイルにコードを挿入する
ウェブサイトのHTMLファイルを編集して、先ほどコピーしたiframeタグを適切な位置に挿入します。
これは、一般的にはコンテンツを表示したいセクション内や、特定の<div>タグ内になります。
<!-- Google Map 埋め込み場所 -->
<div class="map-container">
<!-- ここにコピーしたiframeコードを貼り付け -->
<iframe src="ここにGoogleマップのiframeコードが入ります" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>スタイリングとカスタマイズ
埋め込んだマップのサイズやボーダーなど、見た目を調整したい場合は、iframeタグ内のwidth、height、style属性を編集します。
また、CSSを使用して.map-containerクラスにスタイルを適用することもできます。
注意点
- Google マップをウェブサイトに埋め込む際は、Googleの利用規約に従う必要があります。
- マップの読み込みがページのパフォーマンスに影響を与える可能性があるため、
loading="lazy"属性を使用して遅延読み込みを行うことを検討してください。
これらの手順に従うことで、ウェブサイトにGoogle マップを効果的に埋め込むことができ、訪問者に対して価値ある地理的情報を提供することが可能になります。
以上、ホームページにGoogleマップを埋め込む方法についてでした。
最後までお読みいただき、ありがとうございました。
