【プラグイン】WordPressにgoogleマップを表示させる【不使用】

WordPress
スポンサーリンク

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基本情報
名前 nakatty
性別
年齢 30代前半
住まい 東京都中野区××-×-××-×

↓のような感じでテーブルを作ってます。

まとめ

プラグインを使用しないでWordPressにGoogleマップを表示させる方法をまとめました。

avatar

nakatty

WordPressを始めたばかりの時はプラグインに頼ってましたが、最近は少しずつプラグインを使わない様に直していってます。

プラグインを使いすぎるとサイトの表示に時間がかかるようになるそうですので、なるべく頼らない様にしたいですね!

avatar

のぶこ

タイトルとURLをコピーしました