WordPressで会社のWebサイトを作る時、企業情報の項目に住所にプラスして地図を埋め込むことになった。
そこで今回はWordPressにGoogleマップ埋め込んで表示させる方法をまとめようと思います。
WordPressにGoogleマップを表示させるにはプラグインを使うやり方と、Googleマップからコードをコピーして貼り付けるやり方があります。
GoogleマップをWordPressに表示させるくらいのことなら、あえてプラグインを使う必要も無いと思いうので今回はプラグインを使わずにGoogleマップをWordPress表示させる方法をまとめます。
簡単にできると思います。
↓こんなやつを表示させます。
私の最寄でもある中野駅をWordPressに表示させました。
Googleマップからコードをコピーする
先ずはGoogleマップにアクセスします。
・Googleマップにアクセスしたら、表示したい地図の場所を表示します。
下の画像の赤枠の部分に名称や住所を入力して検索をしてください。
・検索をしたら下の画像の赤枠部分の「共有」項目をクリックしてください。
・「共有」の項目をクリックすると下の画像のような画面が出てきます。
地図のリンクが必要な場合は【リンクを送信する】にあるリンクをコピーすればOKです。
<a>タグの中に入れればそのままリンク先として使えます。
今回は地図を表示させるので赤枠部分をクリックします。
・【地図を埋め込む】をクリックするとHTMLに埋め込むためのコードが出てきます。
【HTMLをコピー】と書いてある部分をクリックしてコードをコピーします。
赤枠の部分で表示する地図のサイズを変えることができます。
WordPressに貼り付ける
Googleマップからコピーした地図のコードをWordPressに貼り付けます。
WordPressの「投稿」か「固定ページ」に貼り付ければ地図が表示されます。
貼り付けるときは下の画像の様に「HTMLとして編集」という部分をクリックしてその中にコピーしたコードを貼り付けてください。
<table>と組み合わせるとこんな感じになります。
名前 | nakatty |
---|---|
性別 | ♂ |
年齢 | 30代前半 |
住まい | 東京都中野区××-×-××-× |
↓のような感じでテーブルを作ってます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<table> <caption>表のタイトル</caption> <tr> <th>項目1左側</th> <td>項目1右側</td> </tr> <tr> <th>項目2左側</th> <td>項目2右側</td> </tr> <tr> <th>項目3左側</th> <td>項目3右側</td> </tr> <tr> <th>項目4左側</th> <td>項目4右側<br> Googleマップのコード </tr> </table> |
まとめ
プラグインを使用しないでWordPressにGoogleマップを表示させる方法をまとめました。
nakatty
WordPressを始めたばかりの時はプラグインに頼ってましたが、最近は少しずつプラグインを使わない様に直していってます。
プラグインを使いすぎるとサイトの表示に時間がかかるようになるそうですので、なるべく頼らない様にしたいですね!
のぶこ