会社の場所やお店の紹介などをするときにGoogleマップを自サイトに埋め込んでみてはいかがでしょうか。今回はプラグインを使わない直接地図の埋め込みコードを取得して反映させる方法を初心者向けにお伝えしたいと思います。
こんにちは、フリーランスWEBディレクター、夫婦ブロガーのトカッチです。
今回はみんな大好きwordpressにGoogleマップを埋め込む方法をご紹介したいと思います。といってもプラグインとかは使用しないのでwordpress以外にも同様の手順ですることができます。
Googleマップを埋め込んだほうが良いケース
- 食べに行った飲食店などをブログで紹介するケース
- 遊びに行ったレジャースポットの場所を紹介するケース
- 会社概要等で所在地を伝えたいケース
こんなときにGoogleマップをwordpressに埋め込むと訪問者にとってもわかりやすいページになるし、ページを作る制作者としても手間が省けて助かります。
飲食店レビューやレジャースポット紹介などは個人ブログが良く使っていて、会社概要等の所在地を伝えたいケースは企業ホームページが良く使っていますね。
Gooleマップを埋め込むことや利用するのに費用とかは必要ないので、手順さえ覚えれば誰でも簡単にすることができるのでお勧めです。当ブログでも飲食店の紹介やレジャースポットの紹介等でGoogleマップの埋め込みは結構頻繁にしています。
住所だけをwordperssに乗せるだけでは味気ないのでGoogleマップを埋め込むほうが見栄えも良いし訪問者にとっても親切仕様なのでいいんですよね。
WordPressにGoogleマップを埋め込む方法
それでは具体的にどのようにしてwordpressにGoogleマップを埋め込むかの説明を行います。
今回は例として「福岡市市役所」のGoogleマップを作ろうと思います。ちなみに市役所の住所は「福岡市中央区天神1丁目8番1号」です。
Googleの検索エンジンで住所を検索する
Googleの検索エンジンで「福岡市中央区天神1丁目8番1号」の住所を入れて検索し、表示された地図をクリックしてください。
YahooやBingの検索エンジンではダメです。必ずGoogleの検索エンジンで検索してください。
共有ボタンを押す
で、「共有」ボタンを押します。
地図のURLを取得する
「共有」には「リンクを送信する」と「地図を埋め込む」の2種類があるので、「地図を埋め込む」を選択する。
この画面で右下の「＋」「－」のボタンや、「Ctrl」キーを押しながらマウスホイールを動かすと地図の大きさを調整することもできます。
で、表示されているHTMLコードをコピーするをクリックし、URLをコピーします。
このとき「この地図は自分専用です」と表示されても問題ありません。
地図は他の人も見ることができますし、他の人には「この地図は自分専用です」とは表示されません。なので無視で大丈夫です。あなたがGooleアカウントにログインしていて、かつあなたがGoogleマップで何かカスタマイズした状態だと「この地図は自分専用です」と表示されます。
コピーしたURLをwordpressに貼り付ける
ワードプレスの投稿画面で「テキスト」に切り替えます。
で、先ほどコピーしたGoogleマップのコードをコピペで貼り付けます。
コードに見慣れてないとテキストモードの画面が意味不明な文字の羅列に見えますが、気合で解読していきましょう。よく意味が分からなければ、ビジュアルモードで配置したい場所をクリックし、テキストモードに貼り付けてコピペで大丈夫かなと思います。
そして「ビジュアルモード」に戻すと地図が表示されるようになりました。
念のためプレビューモードでも表示を確認して問題なければ成功です。
Googleマップの埋め込み作業まとめ
今回はwordpressにGoogleマップを埋め込む手順を紹介させていただきました。難しい知識は必要なく、コピペで実装が可能なのでぜひ取り入れてみてください。
プラグインも必要ないので手軽にできるのも嬉しいですね。
ブログを運営しているとお店の紹介や特定の場所を伝えたいときなんか結構多くあります。住所を入れるだけでも事足りますが、Googleマップの外部サービスを使って自サイトに表示させるとサイトに動きが出てきますよ。
Googleマップをwordpressに埋め込むことは簡単な作業なのでぜひとも覚えておいてくださいね。便利ですよ！
トカッチでした！
コチラの記事もいかがですか
