WordPress にGoogleマップを埋め込む方法

  • このエントリーをはてなブックマークに追加

現地に赴くためにスマートフォンで Google マップを利用しているユーザーは多い。そのニーズに答えて会社の所在地に Google マップがあるとユーザーにとってはうれしい心遣いだ。

ここでは WordPress を使って簡単に Google マップを埋め込む方法を紹介する。

1.Google マップを埋め込む方法

Google マップを埋め込むには、

  • Google マップのコードを取得する
  • Google マップを埋め込む

の手順でできる。操作は簡単なので安心してほしい。

1-1.Google マップのコードを取得する

最初に Google マップにアクセスしよう。

図の赤枠部分に店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。

下部の歯車のアイコンをクリックしよう。

メニューが表示されるので「地図を共有/埋め込む」をクリックする。

ポップアップ画面が表示されるたら「地図を埋め込む」タブをクリックしよう。

すると地図のコードを取得する画面が表示される。

ここで、埋め込む地図のサイズを4パターンから選ぶことができる。

用意されたサイズは次の3種類だ。

  • 小:400 × 300 ピクセル
  • 中:600 × 450 ピクセル
  • 大:800 × 600 ピクセル

自分でサイズを決めるなら「カスタムサイズ」を選ぶと良い。

カスタムサイズをクリックすると、次の画面が表示されるので、図の通り設定しよう。

ピクセル数を計測する方法
あなたのコンテンツの縦・横サイズを基準にしてピクセル数値を入力したいなら、各ブラウザの拡張機能を使うと簡単に計測することができる。Google Chrome であれば「Page Ruler」、Firefox であれば「MeasureIt」がオススメだ。

1-2.Google マップのコードを埋め込む

ここでは HTML の知識がなくても簡単にコードを埋め込む方法を紹介する。

WordPress の管理画面にログインして、投稿ページか固定ページの管理画面にアクセスしよう。

そして、図の通り地図を埋め込む箇所をクリックする。

※ 簡単に地図を埋め込むには、プラグイン「TinyMCE Advanced」のインストールが必要だ。

ビジュアルエディタのメニューより「挿入 → 動画を挿入」の順にクリックしよう。“動画”と表記があるが、コードを埋め込むツールを利用するだけだ。

次に「埋め込む」タブをクリックする。

先ほどコピーした地図のコードを貼り付けて、「OK」をクリックする。

管理画面上では、埋め込まれた地図は図の通りグレー色の図形が表示される。

実際の表示は管理画面からは確認できないため、プレビューで確かめよう。

以上が Google マップの埋め込み方法だ。

会社名を Google マップに登録する
Google マップに登録すれば検索結果に会社名やビル名がを表示できる。ただし、あなたがその店舗やビジネスのオーナーであるという条件が必要だ。登録方法については、『 Google マップに会社名を登録する方法』を読んで設定しよう。
Google マップを埋め込むプラグインについて
MapPress Easy Google Maps」という便利なプラグインはあるが、スマートフォンでも問題なく地図を表示するには操作に精通する必要がある。また、無駄にプラグインを増やすとサーバーの負荷を増やすため、本当に必要かを検討して導入しよう。
  • このエントリーをはてなブックマークに追加

コンテンツ制作に集中するだけで圧倒的な成果を上げる
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” とは、バズ部の運営ノウハウを凝縮した
クラウド型コンテンツマーケティング専用CMSです。

  • ・検索エンジンを徹底的に意識したサイト構造
  • ・誰でも簡単にコンテンツが作れる
  • ・コンバージョンを獲得するための機能も完備
  • ・外部連携も安心!SNS、GAとの連携も万全サポート
  • ・常に最新機能が使える!クラウドを活かしたシステム

専門知識がない方でもコンテンツ制作にのみ集中することができます。
100万PVを超えるメディアを作るために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから