記事概要

Googleマップを活用し、地図を表示する方法について整理する

前提

Googleアカウントにログインしていること

手順(既存住所)

Googleマップにアクセスする
表示したい場所の住所を入力し、場所を選択する
共有ボタンをクリックする
地図を埋め込むを選択する
地図サイズを指定したい場合は、中から別の値に変更する
カスタムサイズの場合は、任意の大きさに指定できる
HTMLをコピーをクリックし、HTML情報を取得する

Googleマップで取得したHTML情報をHTMLファイルに貼り付ける

<p>
  東京駅
</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.831769147377!2d139.7644864753448!3d35.681144129979465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1765800656619!5m2!1sja!2sjp" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

手順(カスタマイズ)

Googleマイマップページにアクセスする
新しい地図を作成をクリックする
CREATEをクリックする
無題の地図を選択する
地図のタイトルと説明を記述する
保存ボタンをクリックする
検索欄に表示したい場所の住所を入力し、場所を選択する
地図に追加をクリックすると、場所が確定する
アイコンの色や種類を変更したい場合、スタイルをクリックして設定を変更する
カスタムアイコンをクリックすると、アイコンを任意の画像に変更することも可能
地図全体のスタイルを変更したい場合、基本地図をクリックし、スタイルを変更する
共有ボタンをクリックする
地図の公開範囲を設定するため、下記2つをチェックする
- このリンクを知っている人なら誰でも表示できる
- インターネットで検索しているユーザーにこの地図を公開する
閉じるボタンをクリックし、「地図の共有」を閉じる
マイマップの右側にある3つの点をクリックする
自分のサイトに埋め込むをクリックする
表示されたHTML情報をコピーする
取得したHTML情報をHTMLファイルに貼り付ける