【Cocoon】記事の中にGoogleMapの登録スポットを埋め込む方法

ブログ運営

ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleMapのスポットを埋め込たい」というもの。

Cocoonで記事を書いていて、

GoogleMapの地図にあるスポットを表示させたいなぁ

と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。

GoogleMapにスポット登録されていない場所にピン押ししたい場合はこちら
スポンサーリンク

GoogleMap上の登録スポットを記事に埋め込む方法

今回やりたいことは

「GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む」

ということ。

地図を載せるなら、GoogleMapのスクリーンショット画像を掲載するのもありですが、

  • 記事から直接GoogleMapを開けるようにしたい
  • GoogleMapのお店や施設の情報をすぐに見れるようにしたい

ときに、便利かなと思います。
わざわざGoogleMap開いて、個別に検索するのもめんどくさいですしね。

準備するものです。

準備するもの
  • ブラウザ版GoogleMap

実施方法です。

スポンサーリンク

イメージ

今回やりたいことのイメージはこんな感じ。

今回のデモ例では、上の画像↑↑のように、セントレアにピン押ししたGoogleMapを埋め込みます。

スポンサーリンク

手順

GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む手順です。

手順は、
 GoogleMapで場所検索→地図のHTMLを発行・コピー→WordPressの記事に埋め込む
という流れです。

GoogleMapで場所を検索

GoogleMapで表示したい場所を検索します。
記事に表示したい場所が表示されたら、[共有]ボタンをクリックします。

デモ例では、「セントレア」を検索して、セントレア全体が見える縮尺にひいた状態で、[共有]ボタンを押しました
記事に埋め込まれる地図の縮尺は、ここで表示した地図の縮尺になります。

地図のHTMLを発行してコピー

[共有]を開いたら、「地図を埋め込む」を押します。
地図のプレビューが表示されるので、表示縮尺と地図の埋め込みサイズを確認して、[HTMLをコピー]を押します。
※このプレビュー画面で地図の縮尺を変更しても、実際に埋め込まれる地図には反映されません。

デモ例では、表示サイズは「中」のままで、HTMLをコピーを押しました

WordPressの記事にHTMLを埋め込む

WordPressの記事の編集画面を開きます。

記事のGoogleMapを埋め込みたい場所に移動して、ブロックメニューで「カスタムHTML」を選びます。

カスタムHTMLの編集画面が開いたら、GoogleMapでコピーしたHTMLを貼り付けます。

コピーしたHTMLを貼り付け

HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。

プレビューでチェック

表示の縮尺やサイズ感に問題なければ、これで「指定の場所にピン押ししたGoogleMapを記事に埋め込む方法」の手順は終わりです。

スポンサーリンク

まとめ

記事の中にGoogleMapを埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。

デモ

動作確認のためのデモとして残しています。

デモ

セントレアの場所にピン押ししたGoogle Mapの地図を埋め込む

●セントレアを引きで見た地図

●セントレアによって見た地図

上のセントレアの地図とGoogleMapで表示縮尺を変えてから、HTMLを作成したもの

コメント

タイトルとURLをコピーしました