ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleMapのスポットを埋め込たい」というもの。
Cocoonで記事を書いていて、
![](https://route-marker.com/wp-content/uploads/2020/07/favicon.png)
GoogleMapの地図にあるスポットを表示させたいなぁ
と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。
GoogleMap上の登録スポットを記事に埋め込む方法
今回やりたいことは
「GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む」
ということ。
地図を載せるなら、GoogleMapのスクリーンショット画像を掲載するのもありですが、
- 記事から直接GoogleMapを開けるようにしたい
- GoogleMapのお店や施設の情報をすぐに見れるようにしたい
ときに、便利かなと思います。
わざわざGoogleMap開いて、個別に検索するのもめんどくさいですしね。
準備するものです。
- ブラウザ版GoogleMap
実施方法です。
イメージ
今回やりたいことのイメージはこんな感じ。
![](https://route-marker.com/wp-content/uploads/2020/09/f120140dcd466f1f412903fbd4627ade-500x335.jpg)
今回のデモ例では、上の画像↑↑のように、セントレアにピン押ししたGoogleMapを埋め込みます。
手順
GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む手順です。
手順は、
GoogleMapで場所検索→地図のHTMLを発行・コピー→WordPressの記事に埋め込む
という流れです。
GoogleMapで場所を検索
GoogleMapで表示したい場所を検索します。
記事に表示したい場所が表示されたら、[共有]ボタンをクリックします。
![](https://route-marker.com/wp-content/uploads/2020/09/2edad3e204928f7dc8ac123dc6772605-1-500x365.jpg)
地図のHTMLを発行してコピー
[共有]を開いたら、「地図を埋め込む」を押します。
地図のプレビューが表示されるので、表示縮尺と地図の埋め込みサイズを確認して、[HTMLをコピー]を押します。
※このプレビュー画面で地図の縮尺を変更しても、実際に埋め込まれる地図には反映されません。
![](https://route-marker.com/wp-content/uploads/2020/09/dd6331a69ab29f12c4bafdfb54e9bcc3-500x364.jpg)
WordPressの記事にHTMLを埋め込む
WordPressの記事の編集画面を開きます。
記事のGoogleMapを埋め込みたい場所に移動して、ブロックメニューで「カスタムHTML」を選びます。
![](https://route-marker.com/wp-content/uploads/2020/09/578f5923f5edabbfa233a281909fc4cb-500x202.jpg)
カスタムHTMLの編集画面が開いたら、GoogleMapでコピーしたHTMLを貼り付けます。
![](https://route-marker.com/wp-content/uploads/2020/09/6dc3778925b780d705e626ce400eeee7-500x149.jpg)
HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。
![](https://route-marker.com/wp-content/uploads/2020/09/d021ea72fa2e71da162506d025a4e60a-500x347.jpg)
表示の縮尺やサイズ感に問題なければ、これで「指定の場所にピン押ししたGoogleMapを記事に埋め込む方法」の手順は終わりです。
まとめ
記事の中にGoogleMapを埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。
動作確認のためのデモとして残しています。
デモ
セントレアの場所にピン押ししたGoogle Mapの地図を埋め込む
●セントレアを引きで見た地図
●セントレアによって見た地図
コメント