今回は、WordPress(ワードプレス)にGoogleMAP(グーグルマップ)を埋め込んで表示させる方法をご説明します。
■GoogleMapの埋め込み例
■【WordPress】GoogleMap(グーグル マップ)を埋め込む方法(動画解説版)
もくじ
WordPressにGoogleマップを埋め込む方法
ここでは、Googleマップをワードプレスに埋め込む方法を説明していきます。
【STEP1】埋め込みたい地図を検索して表示する
まずは、Googleで埋め込みたい住所を検索します(ここでは「大阪府大阪市西区南堀江2-5-1」で検索しました)。ヒットした地図をクリックして「Googleマップ」で表示します。
「共有」を選択します。
「共有」方法を選択するボックスが表示されます。「地図を埋め込む」を選択します。
地図の「埋め込み」コードのコピーします。
(※)地図をズームインしたり、ズームアウトする場合は、[CTRL]キーを押しながら、マウスホイールで調整することができます。
「この地図は自分専用です」と表示されていると、他に人は地図が見えないのかと不安に思うかもしれませんが、基本的に問題ありません。このメッセージは「地図は埋め込めるけども、ログインしているアカウントがカスタマイズした情報、たとえば、★マークでお気に入り登録した場所のことなどは表示されません」という意味になります。
地図のサイズを選択あなたのサイトやブログに合うように、地図のサイズを調整することができます。
「小」「中」「大」「カスタムサイズ」から選択します。サイズはそれぞれ以下のとおりです。
- 「小」横400px 縦300px
- 「中」横600px 縦450px
- 「大」横800px 縦600px
- 「カスタムサイズ」大きさを入力
【STEP2】WordPress側でコピーしたコードを貼り付ける
WordPress側で固定ページまたは投稿ページの編集画面を表示します。「+」リンクを押してブロックを追加します。
ブロックエディター ＞カスタムHTMLを選択します。
コピーした地図の埋め込みコードを貼り付けます。
右上の「プレビュー」ボタンを押下します。
地図が表示されたことを確認します。
合わせて読みたい記事
なお、WordPressのブロックエディター の使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。
(※)従来のクラシックエディター版での埋め込み方法
従来のクラシックエディターを利用している方は、下記の操作方法でGoogleMapを埋め込むことができます。
ワードプレス記事編集画面で「ビジュアル」から「テキスト」に切り替えて、Googleマップの埋め込みコードを貼り付けます。
投稿画面をビジュアルモードに変更すると「Googleマップ」を確認することができます。記事を公開して完了です。
(関連)ストリートビューを埋め込む
下記のように、マップ右下の人形をドラッグ＆ドロップで運んでストリートビューを表示・Google Mapと同様の手順でWordPerssに埋め込むことができます。
■ストリートビューの埋め込み例
まとめ 埋め込みを活用して動きのあるページを作ろう
いかがでしたでしょうか。今回は、WordPress(ワードプレス)にGoogleMAP(グーグルマップ)を埋め込んで表示させる方法をご説明しました。
■【WordPress】GoogleMap(グーグル マップ)を埋め込む方法(動画解説版)
ここでは割愛しますが、Googleマップの他にも、Youtubeやストリートビュー、Twitterや他のWebサービスも似たようた手順で埋め込みコード取得して自分のサイトに貼り付けることができます。
合わせて読みたい記事
今回は、Googleマップを埋め込み表示する方法をご紹介しましたが、下記にYoutubeやGoogle Mapの埋め込み表示方法に関する手順も説明しています。ご興味ある方は合わせてご参照ください。
●【2020年版】WordPressにYoutube動画を埋め込む方法
便利な機能ですのでぜひ活用してみてください。
今回は以上になります。最後までご覧いただきありがとうございました。
合わせておすすめしたい記事
●WordPressのブロックエディターの使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。
●WordPressの使い方全般をしっかり勉強したい方は「【2020年版WordPress(ワードプレス)の使い方総まとめ】」をご参照ください。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
にGoogleMAP(グーグルマップ)を埋め込んで表示させる方法をご説明します。 ■GoogleMapの埋め込み例 ){kind=link}