こんにちは、ゆんつです。
ネットを見ていると、美味しいお店や観光地の紹介がされているブログが沢山あります。
そういうブログでは、紹介したお店や観光地の位置が表示されたグーグルマップが埋め込まれていることが多いです。
グーグルマップが埋め込まれていると、ただ住所が記載されているよりも明確に場所がわかりますし、そのグーグルマップを見ながらその場所を訪問することも容易になります。
WordPressでのグーグルマップの埋め込みは、誰でも簡単に行うことができます。
今日は
について書きたいと思います。
WordPressにグーグルマップを埋め込む方法
まず、準備としてグーグルマップを開いておきます。
グーグルマップで目的地を検索
グーグルマップの検索ボックスに目的地の住所や地名、店の名前などを入れて検索します。
グーグルマップのコードをコピーする
目的地が表示されたら3本線のメニューアイコンをクリックします。
メニューが開くので「地図を共有または埋め込む」をクリック。
共有というウィンドウが開くので「地図を埋め込む」をクリックした後、表示する地図のサイズを
- 小（width="400" height="300"）
- 中（width="600" height="450"）
- 大（width="800" height="600"）
- カスタムサイズ
から選択して、「HTMLをコピー」をクリックしてグーグルマップのコードをコピーします。
コピーしたコードをカスタムHTMLで貼り付ける
WordPressの記事作成画面に戻り、地図を挿入したい場所で+をクリック。
ウィジェットを選択するウィンドウが開くので検索欄に「カスタム」と入力し、検索結果に現れた「カスタムHTML」をクリックします。
カスタムHTMLが配置されるので、そのカスタムHTMLに先ほどコピーしたグーグルマップのコードを貼り付けます。
ちなみに、クラシックエディターを使用している場合は、テキストモードでグーグルマップのコードを貼り付ければOKです。
「下書きを保存」でいったん記事を保存し、プレビューでグーグルマップの表示を確認してみると、きちんとグーグルマップが表示されているはずです。
やったぜ！
以上で、グーグルマップの埋め込みは完了です。
目印が付かない場所に目印を付けてグーグルマップを埋め込みたい場合
地名や店名、住所などでグーグルマップを検索し、その検索結果として表示されたグーグルマップのコードを貼り付けた場合、その場所には赤い目印がついた状態で表示されます。
逆に、地名や店名、住所などがわからず検索できないような場所の場合。
海の上とか山の中とかそういう場所のことです
ただグーグルマップでその場所を開いて、その場所のグーグルマップのコードを取得して貼り付けても赤い目印は表示されません。
このような場合に、目印をつけたグーグルマップを表示させたい場合。
グーグルマップ上の目印を付けたい場所をクリックします。
するとクリックした場所に灰色のマークが表示され、下の方にその場所の座標が表示されるので、その座標をクリック。
すると、その座標で検索が行われ、その場所に赤い目印が付きます。
この状態で、先述した方法でグーグルマップのコードを取得して貼り付ければ、目印のついたグーグルマップを表示することが出来ます。
縮尺の変更
グーグルマップで目的地を詳細に表示したり、それとは逆に広域に表示したい場合。
コードの一部を編集することで自分の望む縮尺で表示することが可能になります。
グーグルマップを貼り付ける際のコードに「!4f13.1」という部分があります。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3297.2542876617554!2d130.93066348251784!3d34.26756726249139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35430d1a3e257655%3A0xda96a6bcd83eadd0!2z5a-655WR6L6y5ZyS!5e0!3m2!1sja!2sjp!4v1615415076942!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
この「13.1」の部分が縮尺です。
ですので、この縮尺部分を自分の好きな縮尺に書き換えてしまえばＯＫです。
縮尺は
1（詳細）~180（広域）
までの間で設定可能。
たとえば縮尺の数値を1にすると、目的地がドアップで表示されますし、
近っ！
縮尺の数値を180にすると世界地図になってしまいます(笑)
遠っ！
縮尺の数字を調整して、納得いく表示にしてみてください。
まとめ
以上がWordPressへのグーグルマップへの埋め込み方法です。
まとめると
という、とても簡単な手順で、ブログにグーグルマップを埋め込むことができます。
ただ、便利なグーグルマップですが埋め込み過ぎるとページが重くなるので、なんでもかんでもグーグルマップを埋め込むというのは止めておいた方が良いと思います。
適切にグーグルマップを埋め込めば、記事がより一層理解しやすくなるのではないでしょうか。
それでは、またー。
コメント