WordPressでGoogleマップの地図を表示させる方法は?

この記事の著者

名前:かなはん 趣味:読書と映画鑑賞 肩書き:現役大学職員 勤務中に昼寝をするポンコツ上司に毎日イライラしながらも、謙虚に低姿勢に日々学生をサポートしている。「大学職員は副業禁止?そんなもん知るか!」精神で、在職中でありながらも、ネットビジネスで起業を始める。現在は、バレても大丈夫なように対策をしながら、外注化を駆使してアフィリエイトサイトを2つ運営中。外注化を開始して、たった1ヶ月で30名の外注さんを採用することに成功。自分の時間を一切使うことなく、記事作成をしている。自分と同じように「辛い仕事を早く辞めたい。」と思っている大学職員の方、日々お仕事を頑張っている方に有益な情報を公開しつつ外注化を薦めている。

最近知った、耳で聞ける神アプリ「オーディオブック」私にとって、本は睡眠導入剤的な存在でした(笑)でも、これなら電車の中でもどこでも聞ける。これで1日1冊、余裕で聞ける。

月額780円で何冊でも聴き放題。

30日間の無料期間もあります。本を読むことに対する苦手意識がめちゃくちゃ減りマウス。

オーディオブック聴き放題なら - audiobook.jp

------------------------------------------------

みなさん、こんにちは。

かなはんです。

「WordPressにGoogleマップを挿入できたらいいのにな。」

って思うことありませんか?

でも「やり方を見ても分からなさそう。難しそう。」

と思う方も多いかもしれませんが、すごく簡単です!

今回は「WordPressでGoogleマップの地図を表示させる方法」をご紹介します。

地図を挿入する方法

地図のコードを取得する

① Google Mapで挿入したい地図を表示します。(今回は、東京タワーを選びました。)

② 左上の赤枠で囲んでいる箇所をクリックしてください。

③ 赤枠内の「地図を共有または埋め込む」をクリックします。

④ 赤枠内の「地図を埋め込む」をクリックしてください。

⑤ 赤枠内でサイズを変更することができます。

⑥ カスタムサイズで好きなサイズに変更することもできます。

サイズの変更ができたら「HTMLをコピー」をクリックすればOKです。

WordPressに移動する

① WordPressに移動します。

②「ビジュアルモード」ではなく赤枠内の「テキストモード」をクリックしてください。

③ 地図を埋め込みたい場所に、カーソルを移動します。

今回は、赤枠内の位置に先ほどコピーしたHTMLのコードを貼り付けます。

先ほどコピーしたHTMLのコードを貼り付けました。

⑤ 赤枠内の「ビジュアルモード」をクリックしてください。

すると、以下のような感じで埋め込むことができます。

きちんと表示できていれば成功です。

Aさん

きちんと貼り付けたんですが、地図ではなくコードのままで表示されます。。。

かなはん

コードのままで表示される原因は、コードを「ビジュアルモード」に貼り付けている可能性が高いです。

もう一度、「テキストモード」で貼り付けているかどうかを確認してみてくださいね。

Aさん

分りました!

もう一度、確認してみます!

まとめ

  1. Google Mapで挿入したい地図を表示する
  2. 「地図を共有または埋め込む」をクリック
  3. 「地図を埋め込む」をクリック
  4. 「HTMLをコピー」をクリック
  5. WordPressに移動する
  6. 「ビジュアルモード」ではなく「テキストモード」をクリック
  7. 先ほどコピーしたHTMLのコードを貼り付ける
  8. 「ビジュアルモード」をクリック
  9. きちんと表示できているか確認する

今回は「WordPressでGoogleマップの地図を表示させる方法」をご紹介しましたが、いかがでしたか?

「やってみたら意外と簡単だった」ということはよくあります。

今回の記事を参考に、WordPressにGoogleマップを挿入してみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA