WordPressにGoogleマップを表示させる方法をお伝えしていきます。
とても簡単にできますので是非一緒に操作してみてください。
Googleマップで検索する
まず、Googleマップを表示します。
- 名称または住所を入力
- 「共有」をクリック
- 「地図を埋め込む」をクリック
- 「HTMLをコピー」をクリック
WordPressへ埋め込む
以下の画像のように、埋め込みたい箇所に①②の順でカスタムHTMLのブロックを挿入します。
先ほどコピーしたコードを " カスタムHTML ” に貼り付けし、プレビューで見てみましょう。
問題なくマップが表示されています。
しかし、実際に公開されたマップを見てみると・・
横幅が狭くなっています。
もう一度「HTML」 で確認してみると、横幅を指定する” width " が ” 600 " と入力されています。
ここを" 100% "と入力しなおし、もう一度サイトを見てみましょう。
横幅100％で表示されました。
まとめ
Googleマップはほとんどのサイトで使用されていて、ユーザビリティも良くなるものです。
とても簡単に設置できるので、是非活用してください。
投稿者プロフィール
-
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。
最新の投稿
WordPress講座2024年7月3日レスポンシブデザインを意識したカラムブロックの使い方- WordPress講座2024年6月18日カスタムフィールドにプラグイン【WP Imp Exp】を使ってインポートする方法
- WordPress講座2024年4月5日カスタムフィールドの簡単な作り方をご紹介！
- WordPressのプラグイン2024年3月18日カスタム投稿でウェブサイトを簡単カスタマイズ
お問合せフォームはこちら
（※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。）
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
