WordPressへのGoogleMapの埋め込み方法とグーグルマップへのリンク方法

WordPress(ワードプレス)へのGoogleMapの埋め込み方法とグーグルマップへのリンク方法の解説です。新エディター(ブロックエディター)と旧エディター(クラシックエディター)両方の貼り付け方法を解説しています。

★ヤフーやグーグルなどの検索エンジンで【 googlemap 】や 【 グーグルマップ 】などで検索します。

★出てきた結果で、【 Google マップ 】と書かれているものをクリックします。

★グーグルマップが表示されたら、左上の検索窓【 Googleマップを検索する 】の部分に、
表示したい場所の【 施設名 】や【 店舗名 】、【 施設住所 】などを入力して、
エンターまたは虫眼鏡を押して検索します。

★施設名が書かれている場合は、【 共有 】とかかれたボタンを押します。
施設名が書かれていない場合は、左上の検索窓の【 三 】を押し、
出てきたメニューの中から【 地図を共有または埋め込む 】を選びます。

すると、【 共有ウィンドウ 】が出てきます。

ここから、グーグルマップへのリンクを作ったり、地図埋め込み用のコードを表示したりできます。

ワードプレスで、グーグルマップへのリンクを作る場合

【 共有ウィンドウ 】から、【 リンクを送信する 】タブを押します。
共有リンクの下にある、【 https:// 】のアドレスを、なぞってコピーし、
ワードプレスの記事作成画面でリンク挿入ボタン(linkまたはリンクの挿入/編集ボタン)をおし、リンクをつけます。

ワードプレスで、グーグルマップの地図を埋め込みする場合

【 共有ウィンドウ 】から、【 地図を埋め込む 】タブを押します。
左に【 中 】と書いている部分で、表示する地図の大きさを変えることができます。
(小・中・大・カスタム[好きなサイズを指定できます]から選べます)

その右にある、
【 <ifreme src=・・・・&rt; 】のアドレスを、なぞって右クリックコピー
または、
【 HTMLをコピー 】
を押して、HTMLコードをコピーします。


ここからの作業では、間違った場所に貼り付けすると地図が表示されないので気を付けてください。


旧エディター(クラシックエディター)でグーグルマップの地図を埋め込みする場合

ワードプレスの記事作成画面で、以前のエディター(ClassicEditorプラグインを導入またはテーマから旧エディターを選択の方)の場合は、【 テキスト 】タブを選びテキスト入力モードにしてから、コードを貼り付けします。

プレビューにてきちんと地図が埋め込みできたか確認してください。

新エディター(ブロックエディター)でグーグルマップの地図を埋め込みする場合

ワードプレスの記事作成画面で、右上のタテに【・・・】が並んだボタンを押し、メニューから【コードエディター】を選び、出てきた編集画面でコードを貼り付けします。

プレビューにてきちんと地図が埋め込みできたか確認してください。


きよひこのアフィリエイト~無料メルマガ講座
年収100万円稼ぐノウハウが身に着く!
きよひこメルマガ講座登録はこちら
お名前(ニックネーム可):
メールアドレス: