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

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

関連記事

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …

Web

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

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

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Web

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?

Web

Web Components: CSS Shadow Parts の使い方

CSS Shadow Parts の使い方を説明します。