この記事では、ウェブサイトにGoogleマップを埋め込む方法を説明します。HTMLコードを使用して簡単に地図を表示させ、カスタマイズする方法を学びましょう。このガイドは初心者向けに設計されており、特別なプログラミングスキルは必要ありません。
目次
ステップ 1: Googleマップを開く
まず、Googleマップを開き、マップ上で表示したい場所を検索します。目的の場所を見つけたら、メニューから「共有」ボタンをクリックします。
ステップ 2: 埋め込みコードを取得
「共有」オプションから「マップを埋め込む」を選択し、表示されたポップアップウィンドウから「HTMLをコピー」します。このコードは、ウェブサイトのHTMLファイルに直接貼り付けることができます。
ステップ 3: HTMLにコードを貼り付ける
ウェブサイトのHTMLファイルを開き、マップを表示したい場所に先ほどコピーした埋め込みコードを貼り付けます。コードは以下のような形式になります
<iframe
width="600"
height="450"
style="border:0"
loading="lazy"
allowfullscreen
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3...">
</iframe>ステップ 4: サイズの調整
埋め込みコードには、マップの幅と高さを指定する部分が含まれています。これらの値は、ウェブサイトのデザインに合わせて自由に調整できます。
ステップ 5: ウェブサイトでの確認
すべての変更を保存した後、ウェブサイトをリフレッシュして、マップが正しく表示されるか確認します。
まとめ
HTMLにGoogleマップを埋め込むのは非常に簡単で、数ステップで完了します。この方法を使用すれば、ウェブサイトの訪問者に対して、場所の正確な位置を簡単に示すことができます。さらにカスタマイズを加えたい場合は、GoogleマップのAPIを使用することも可能ですが、これにはより高度な設定が必要になります。
