こんにちは、ゆんつです。
ネットを見ていると、美味しいお店や観光地の紹介がされているブログが沢山あります。
そして、そういうブログでは、紹介したお店や観光地の位置が表示されたグーグルマップが埋め込まれていることが多いです。
地図があるとただ住所が書かれているよりも位置が明確にわかりますし、記事を見ながらその場所を訪ねることだってできます。
WordPressでグーグルマップを埋め込むのは、誰でもとても簡単に行うことができます。
今日は
について書きたいと思います。
グーグルマップをWordpressに埋め込む
まず、準備としてグーグルマップを開いておきます。
グーグルマップで目的地を検索
グーグルマップの検索ボックスに目的地の住所や地名、店の名前などを入れて検索します。
メニューアイコンをクリック
目的地が表示されたらメニューアイコンをクリックします。
「地図を共有または埋め込む」をクリック
メニューが開くので「地図を共有または埋め込む」をクリック。
地図のコードをコピーする
共有ダイアログが開くので「地図を埋め込む」をクリックしたのち、地図のサイズを選択して「HTMLをコピー」をクリックしてコードをコピーする。
コピーしたコードをカスタムHTMLで貼り付ける
記事の作成画面で、地図を挿入したい場所でカスタムHTMLをクリック。
そしてカスタムHTMLにコピーしたコードを貼り付けます。
確認
ブログを開いてグーグルマップの表示を確認します。
グーグルマップが表示されています。
やったぜ！
以上でWordPressへのグーグルマップの埋め込みは完了です。
縮尺の変更
グーグルマップで目的地を詳細に表示したり、それとは逆に広域に表示したい場合。
グーグルマップの地図を拡大したり縮小したりしてコードを貼り付けても、思ったような縮尺にならないことがあります。
そのような場合はコードを一部編集することで可能になります。
地図のコードには「!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にすると世界地図になります(笑)
遠っ！
縮尺の数字を調整して、納得いく表示にしてみてください。
サイズによる地図の見え方
ブログに埋め込める地図のサイズには大、中、小、自分で設定できるカスタムサイズがあります。
大、中、小の見え方を実際に確認してみましょう。
widthが横幅でheightが高さです。
小（width=”400″ height=”300″）
中（width=”600″ height=”450″）
大（width=”800″ height=”600″）
まとめ
以上がWordPressへのグーグルマップへの埋め込み方法です。
という、とても簡単な手順で、ブログにグーグルマップを埋め込むことができます。
便利なグーグルマップですが、埋め込み過ぎるとページが重くなるので、なんでもかんでもグーグルマップを埋め込むというのは止めた方が良いです。
適切にグーグルマップを埋め込めば、記事が一層理解しやすくなると思います。
それでは、またですー。
コメント