ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

WordPressの記事にGoogleマップを埋め込む方法!

,

※古い記事です。Gutenbergなら「HTMLとして編集」をクリックして貼り付けてください。
 

プラグインを使わずに、WordPressの記事にGoogleマップを埋め込む方法です。

インターネットブラウザ(ChromeとかInternet Explorerとか)で、Googleマップを開きます。
Google

目的地を検索して、表示したら、「共有」をクリック。


「地図を埋め込む」タブをクリックして、「HTMLをコピー」をクリック。
Googleマップで目的地を検索

WordPressの「投稿」→「新規追加」で記事投稿画面を開きます。
「ビジュアル」ではなく「テキスト」タブをクリックして、
先ほどコピーしたHTMLを記事内に貼りつけ。

いっちょあがり!

見た目を少し変更したいとき。

デフォルトはこうなってます。

<iframe src="https://www.google.com/maps/embed?pb=うんたらかんたら" 
  width="600" 
  height="450" 
  frameborder="0" 
  style="border:0;" 
  allowfullscreen="" 
  aria-hidden="false" 
  tabindex="0">
  </iframe>

ここでいじくってね。

  width="地図の幅(~pxとか100%とか)" 
  height="地図の高さ(上に同じ)"
  style="cssを設定できます。" 

左右のまんなかに設置したいときは、

<div style="text-align:center">
 <ifreme うんたらかんたら></iframe>
</div>

と、style="text-align:center"divで囲んでね。

WordPressの記事にGoogleマップを埋め込む方法! #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #Googleマップ

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク