Googleドライブのファイルをウェブページに埋め込む方法

Googleドライブのコンテンツをウェブページに埋め込む方法を紹介する。いずれも、ファイルの一覧表示画面で作業するのではなく、各ファイルを開いた後に作業するのがポイント。後半で紹介するマイマップの作業手順が多い。

参考：https://drive.google.com/drive/

まず、ドキュメント、スプレッドシート、スライド、フォーム、図形描画の場合。ウェブに公開（フォーム埋め込む）というボタンを押してからHTMLタグをコピペすればOK。

・マイドライブ→ファイルを開く→ファイル→ウェブに公開→公開→埋め込む

ドキュメントの埋め込み見本


スプレッドシートの埋め込み見本


スライドの埋め込み見本（小480x299）


フォームの埋め込み見本（カスタム480x299）


上記回答の埋め込み見本

図形描画埋め込み見本（カスタム480x299）



つぎに、マイマップの場合。こちらも同じように、自分のサイトに埋め込むというボタンを押してからHTMLタグをコピペする。ただ、事前に共有のボタンを押してからオン（ウェブで一般公開）に変更しておかなければならない。

・マイドライブ→ファイルを開く→共有→ユーザーの変更→オン（ウェブで一般公開）

・マイドライブ→ファイルを開く→オプション→自分のサイトに埋め込む：○

マイマップ埋め込みの見本（カスタム480x299）


補足として、Googleフォトにアップロードした画像をマイマップのポイントに追加する場合。

・Googleフォト（https://drive.google.com/drive/photos）→フォトを選択→リンクを取得

・Googleフォト（https://photos.google.com/）→フォトを選択→右クリック→画像アドレスをコピー

前者のGoogleフォト内にあるGoogleドライブ（https://drive.google.com/drive/photos）でリンクを取得する方法だと失敗する。画像が表示されるのは１～２日だけで、その後は黒塗り画像となってしまう。後者のGoogleフォト（https://photos.google.com/）で画像アドレスをコピーする方法なら問題ない。ただし、その画像を共有アルバムにしておく必要がある。