WordPressで地図をこのように表示させたい、埋め込みたいと思ったことはありませんか?
今回はその方法について説明していきます。
用意するページ・タブ
今回は2つ準備します。
- GoogleMap
- WordPress編集ページ
順序
- GoogleMapを開く
- 示したい・ピン表示したい地点を選択する
- 共有を選ぶ
- HTMLのコピーを選択する
- WordPress画面を開く
- 埋め込みたい位置を選択し、カスタムHTMLをクリックする
- ペーストする(完了)
GoogleMapを開く
通常のGoogleMapを開きます。
示したい・ピン表示したい地点を選択する
示したい場所を選びます。今回は例として皇居を選びました。
共有を選ぶ
上画像の皇居概要の中でも一番右側にある共有を押します。
共有画面では:リンクを送信する・地図を埋め込む
という選択があるため、地図を埋め込むの方を選択します。
スマホで行うと、地図を埋め込むという選択が出ないことがあります!!
※リンクを送信するのパターンは一番最後に記載してあります!!
リンクの送信はスマホのLINE共有などで使えます
HTMLのコピーを選択する
共有の”地図を埋め込む”というところからHTMLをコピーをクリックします。
GoogleMapでの作業はここまでになります。
WordPress画面を開く
ここからはWordPressでの作業になります。
WordPressのブロック挿入ツール内ウィジェットに“カスタムHTML”というところがあることを確認します。
埋め込みたい位置を選択し、カスタムHTMLをクリックする
実際に地図を埋め込みたい位置を選択し、先程のカスタムHTMLをクリックします。
すると、下記のような枠が出てきます。
ペーストする(完了)
最後に先程コピーしたHTMLをペーストすれば終了です。
ここで、プレビューを押すと文字列ではない実際に表示されるマップになります。
ちなみに…
地図を埋め込むではなく、リンクを送信するを選択すると下記のような表示になります。
ここでは住所のみが表記されるだけで、マップの表示はできません。
実際に下にリンク付きのものを上げます。クリックして頂けるとお分かり頂けるかもしれませんが、このページからGoogleMapに移動すると思います。
まとめ
今回は地図を記事の中に埋め込む方法でした。
通常のコピーでも表記できますが、ページ・アプリが飛んでしまうというデメリットがあり、同一ページ内で表示したい場合の方が多いと思いますので、ぜひ今回の手順で地図を埋め込んでみてください!!
コメント