Googleマップを使うことで、地図をWordPressの記事に簡単に埋め込んで表示することができます。埋め込むまでの作業は、2ステップです。
- Googleマップを埋め込むためのHTMLコードをコピーする
- コピーした埋め込み用のHTMLコードをエディタに貼り付ける
ここから、Googleマップの埋め込む方法を説明していきます。
Googleマップから埋め込みコード取得
Googleマップを開きます。
地図表示(目的地点あり)
Googleマップの(サイドパネルを開いて)検索で、表示したい場所(住所など)を入力します。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap.png)
検索の下にある「共有」をクリックします。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap1.png)
埋め込みコード取得
共有ウインドウが表示されたら、「地図を埋め込む」をクリックするとiframeを使った埋め込むタグが表示され、その横にある「HTML を コピー」をクリックします。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap2_2-600x161.png)
また、サイズの変更は、埋め込むタグが表示されている左に「小」「中」「大」「カスタムサイズ」のところで変更できます。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap2_1-600x244.png)
地図の大きさを「カスタムサイズ」にすると任意のサイズに変更できます。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap3-600x212.png)
地図表示(目的地設定なし)
検索をしないで「表示したい地図の場所」を記事に埋め込みたいときは、「メニュー」をクリックします。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap4_2.png)
サイドにメニューが表示されたら、「地図を共有または埋め込む」をクリックすると「共有」ウインドウが表示するので、「埋め込みコードを取得」します。
![](http://wpcos.com/wp-content/uploads/2020/11/googlemap4_1.png)
WordPressの投稿(固定ページ)にコードを埋め込む
投稿(または固定ページ)でエディター画面を開きます。
ブロックエディターの「+」をクリックして、「カスタムHTML」ブロックをGoogleマップを表示したいところに作成します。
![](http://wpcos.com/wp-content/uploads/2020/11/gutenberg_youtube4.png)
「カスタムHTML」ブロックに埋め込みコードを入力(貼り付け)すると地図が表示されます。
スポンサーリンク
コメント