Web

Google マップの地図をウェブページに埋め込む手順

投稿日:2018年9月28日 更新日:

Google マップの地図を、ウェブページに埋め込む手順について説明します。

手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(2018年9月)での手順をここに記録する意味合いもあります。

手順

(1) Google マップ で、埋め込みたい場所に移動します。

(2) 画面左上の メニュー アイコンをクリックします。

バーアイコンをクリックします
メニュー アイコンをクリックします

(3) [地図を共有または埋め込む] をクリックします。

[地図を共有または埋め込む] をクリックします
[地図を共有または埋め込む] をクリックします

(4) [地図を埋め込む]タブをクリックして表示し、[HTMLをコピー] をクリックします。

クリップボードに HTML がコピーされます。

[HTMLをコピー] をクリックします
[HTMLをコピー] をクリックします

(5) 埋め込み先の HTML内に、コピーしたHTMLを貼り付けます。

HTMLを貼り付けます
HTMLを貼り付けます

(6) 埋め込み先のHTMLをウェブブラウザで表示すると、(1)の場所が埋め込まれて表示されます。

地図が埋め込まれています
地図が埋め込まれています
Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

2018.08.24
Google

Googleマップで調べた経路をホーム画面に追加する (Android)

2019.03.15

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

プライバシー

ウェブブラウザの DNT (Do Not Track) を有効にする方法

目次1. Do Not Track とは?2. トラッキングを拒否する意思を送信する手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。