自分で作る選択を!初心者でもできるホームページ・ブログの始め方・作り方

WEBST8

【WordPress】GoogleMapを ワードプレスに埋め込む方法

WordPress

【WordPress】GoogleMap(グーグル マップ)を埋め込む方法

今回は、WordPress(ワードプレス)にGoogleMAP(グーグルマップ)を埋め込んで表示させる方法をご説明します。
 

お店の地図をGoogleMAPでホームページを表示したいんですけど、どうしたらよいでしょうか??

GoogleMAPの埋め込み機能を使って、簡単に地図を表示することができますよ。ここでは、ワードプレスにマップを埋め込む方法を説明していきますね。

 

■GoogleMapの埋め込み例

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

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

ここでは、Googleマップをワードプレスに埋め込む方法を説明していきます。
 

【STEP1】埋め込みたい地図を検索して表示する

まずは、Googleで埋め込みたい住所を検索します(ここでは「大阪府大阪市西区南堀江2-5-1」で検索しました)。ヒットした地図をクリックして「Googleマップ」で表示します。
住所でGoogle検索する
 

Bingやyahooではなく、Googleで検索します。

 

「共有」を選択します。
Googleマップ 共有をクリック
 

「共有」方法を選択するボックスが表示されます。「地図を埋め込む」を選択します。
Googleマップ 地図を埋め込むを選択
 

地図の「埋め込み」コードのコピーします。
Googleマップ 埋め込みコードをコピー
(※)地図をズームインしたり、ズームアウトする場合は、[CTRL]キーを押しながら、マウスホイールで調整することができます。
 

この地図は自分専用は気にしなくてOK

この地図は自分専用です
 

「この地図は自分専用です」のメッセージが表示されていますが、地図を埋め込んでも他の人から見えないんでしょうか??
結論から言うと、他の人にも地図は見えます。無視して構いません。

 

「この地図は自分専用です」と表示されていると、他に人は地図が見えないのかと不安に思うかもしれませんが、基本的に問題ありません。このメッセージは「地図は埋め込めるけども、ログインしているアカウントがカスタマイズした情報、たとえば、★マークでお気に入り登録した場所のことなどは表示されません」という意味になります。
GoogleMap お気に入りなどの設定はログインアカウントごとの設定で埋め込むことはできない(自分専用)

 

(補足)地図のサイズ

地図のサイズを選択あなたのサイトやブログに合うように、地図のサイズを調整することができます。

Google MAP 地図の大きさ設定
 
「小」「中」「大」「カスタムサイズ」から選択します。サイズはそれぞれ以下のとおりです。

  • 「小」横400px 縦300px
  • 「中」横600px 縦450px
  • 「大」横800px 縦600px
  • 「カスタムサイズ」大きさを入力

 

【STEP2】WordPress側でコピーしたコードを貼り付ける

WordPress側で固定ページまたは投稿ページの編集画面を表示します。「+」リンクを押してブロックを追加します。
WordPress 固定ページ編集画面 + のブロック追加をクリック
 

ブロックエディター >カスタムHTMLを選択します。
ブロックエディター >カスタムHTML
 

コピーした地図の埋め込みコードを貼り付けます。
コピーしたコードを貼り付ける
 

右上の「プレビュー」ボタンを押下します。
「プレビュー」ボタンを押下する
 

地図が表示されたことを確認します。
地図が表示された
 

合わせて読みたい記事

なお、WordPressのブロックエディター の使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

 
 

(※)従来のクラシックエディター版での埋め込み方法

従来のクラシックエディターを利用している方は、下記の操作方法でGoogleMapを埋め込むことができます。
 

【STEP1】地図の埋め込みコードをコピーするところまでは同じですので、予め地図の埋め込みコードをコピーしておいてください。

 

ワードプレス記事編集画面で「ビジュアル」から「テキスト」に切り替えて、Googleマップの埋め込みコードを貼り付けます。
ワードプレス記事編集画面でテキストモードに切り替えてGoogleマップの埋め込みコードを貼り付ける
 

投稿画面をビジュアルモードに変更すると「Googleマップ」を確認することができます。記事を公開して完了です。
ワードプレス 記事編集画面(ビジュアルモード)
 
 

(関連)ストリートビューを埋め込む

下記のように、マップ右下の人形をドラッグ&ドロップで運んでストリートビューを表示・Google Mapと同様の手順でWordPerssに埋め込むことができます。


 
■ストリートビューの埋め込み例

 
 

まとめ 埋め込みを活用して動きのあるページを作ろう

いかがでしたでしょうか。今回は、WordPress(ワードプレス)にGoogleMAP(グーグルマップ)を埋め込んで表示させる方法をご説明しました。
 

比較的簡単な操作ですが、外部のサービスを自分のホームページやブログ内に取り込むことで動きのあるページを作ることができます。
 

ここでは割愛しますが、Googleマップの他にも、Youtubeやストリートビュー、Twitterや他のWebサービスも似たようた手順で埋め込みコード取得して自分のサイトに貼り付けることができます。
 

合わせて読みたい記事

今回は、Googleマップを埋め込み表示する方法をご紹介しましたが、下記にYoutubeやGoogle Mapの埋め込み表示方法に関する手順も説明しています。ご興味ある方は合わせてご参照ください。
 
【2020年版】WordPressにYoutube動画を埋め込む方法

【WordPress】Googleストリートビューを埋め込み・表示する方法

 

便利な機能ですのでぜひ活用してみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

合わせておすすめしたい記事

●WordPressのブロックエディターの使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

●WordPressの使い方全般をしっかり勉強したい方は「【2020年版WordPress(ワードプレス)の使い方総まとめ】」をご参照ください。

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-,

Copyright© WEBST8 , 2020 All Rights Reserved Powered by AFFINGER5.