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

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

関連記事

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

HTML

HTML の基礎

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。 (HTML5の仕様書である HTML Standard を翻訳している部分も多くあります) 後半では、タグ毎に使い方な …

Web

Webページを検証する各種サービス

Webページを検証する各種サービスを紹介します。