ブログにGoogleマップを貼りたい 埋め込む方法
こんにちは☆
大阪で内装工事の施工店を営んでいる アオゾラです。
当店は 店舗ブログを持っており、店情報や施工日記など投稿し ネットより集客しています。
そんなブログ記事内で『地図』を表示したい、埋めこみたいときがあります。
そこで、今回は【店舗の住所などのグーグルマップ】をブログに埋め込む方法。
WordPressにおいて グーグルマップ掲載方法を案内します。
目次
ブログに貼りたい地図を検索する
まずは WordPressブログに貼りたい、載せたい場所の地図（googleマップ）を検索します。
例えばブログ記事内に「大阪城の地図」を載せる とします。
Googleマップで「大阪城」と検索窓に入れてクリック。
すると、Googleマップが自動的に「大阪城」を位置した画面に移動します。
そのあと、丸で囲った『共有』という箇所をクリックします。
『共有ボタン』で地図を埋め込むを選択
『共有』をクリックすると「リンクを送信する」「地図を埋め込む」と２つ表示。
右側の「地図を埋め込む」を選びクリックください。
すると［小サイズ］［中サイズ］［大サイズ］［カスタム］
と 地図の埋め込みサイズを選ぶことができます。
画像では、紫色矢印で「中」と表示しています。
中の隣「▼」を押すと、ほかにも［小サイズ］［大サイズ］［カスタム］と出てきます。
［小サイズ］＝画像幅400ピクセル、高さ300ピクセルの地図サイズ。
［中サイズ］＝画像幅600ピクセル、高さ450ピクセルの地図サイズ。
［大サイズ］＝画像幅800ピクセル、高さ600ピクセルの地図サイズ。
「▼」を押せば 地図サイズを変更できます。
WordPressブログに中サイズ地図を埋め込む方法
例えば「中サイズの地図」をブログに埋め込みたい場合の方法です。
「中」をクリック。
すると、すぐ右横に ズラズラ～と長文の ⇓英文字コード が表示します。
<iframesrc="https://www.google.com/maps/embedpb=!1m18・・・・・
『HTMLをコピー』という青文字をクリックすると勝手にコピーされる😁
つぎに 自分のブログ投稿画面へ移動して 先ほどコピーしたコードを貼り付けます。
貼り付けるときの注意点を１つ書きます。
ブログ投稿画面は「ビジュアル」ではなく「テキスト」に変えてから貼り付けよう！
「中サイズの地図」を埋め込んだ。
「小サイズの地図」を埋め込み★
「大サイズの地図」を埋め込みました。
ブログに埋め込むなら、サイズはどれがお勧めですか？
「小サイズ」で良いです。地図を詳しく見たいなら「拡大地図を表示」できますから♪
グーグルマップのカスタムサイズの使い方
大中小サイズのほか「カスタムサイズ」があります。
googlemapでカスタムサイズを使用する方法を 最後に案内します。
カスタムサイズを選ぶと、以下の画像が表示されます。
赤枠のサイズ箇所を お好みサイズに変え入力します。
すると、希望サイズのグーグルマップ埋め込みができます★
あとは「HTMLをコピー」を押し コピーされたコードをブログに貼れば 埋め込み完了。
ちなみに、カスタムの700ピクセル×400ピクセルサイズの地図は以下★
先ほども書きましたが、ブログ投稿ページは「テキスト」で貼り付けください🌸
まとめ：ブログにGoogleマップがあると便利
店用のブログに「グーグルマップ」を埋め込むことができれば便利です。
店舗の場所（位置）を 地図でお客様に教えられますからね。
ブログで時には プライベート記事を書くこともありますよね。
そんなとき、〇〇のクレープ屋さんは美味しいよ！と その地図を載せることもできます🍀
グーグルマップを埋め込むと 記事内容が より分かりやすくなります。
ブログは文章ばかり並ぶより 写真やイラストが文の間に 挿入されると 読みやすいもの♪
写真までの効果はないですが、マップを入れることで 文章が少しは読みやすくなり、理解も早まります。
Googleマップをブログへ埋め込んだことがない方は 難しい操作に感じるかな。。。
しかし、当記事を読んで試してみてください☆
意外と カンタンに地図を貼ることができますよ😊
以上【ブログにGoogleマップを貼りたい 埋め込む方法】の話をアオゾラがしました。
ー関連記事ー
♦写真画像 ピクセルとは？（twitterプロフィール画像やヘッダー画像サイズは？）
↓下記リンクをクリック頂くと「アオゾラのブログランキングポイント」が加算☆
人気ブログランキング参加してますので、応援よろしくお願いします😊
お客さんに店の位置（住所）を伝えたいとき 地図があれば便利ですよね。