ワードプレス│ブログに、Google マップを簡単に埋め込む方法を詳しく解説

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF ブログ関連

WordPressワードプレス)でブログを書いている方で特にトレンドブログのショップ紹介やレビュー記事で場所を伝えたいときに、Google(グーグルマップ)を埋め込みたい場面が多々あるかと思います。今回は埋め込み方がわからない初心者の方へ簡単に埋め込む方法を詳しく解説したいと思います。

Google マップ 埋め込み方

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF

こちらは、グーグルマップの埋め込んだプレビューの画像です。

それでは実際埋め込んで行きましょう。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF1

まずは、埋め込みたい場所を検索しましょう。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF2

大阪のJR大阪駅北側に位置し、西館「LUCUA 1100」と東館「LUCUA」の2館からなる、国内最大級の駅型商業施設「LUCUA osaka」を例にとって解説していきます。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF3

「別のモバイル端末に送信」の右隣りにある「共有」を押します。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF4

すると画面が暗転して、「共有」がポップアップされます。

はじめは「リンクを送信する」が選択されているので、「地図を埋め込む」へ選択し直します。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF5

「地図を埋め込む」を画面に切り替わるので、サイズを「少」「中」「大」「カスタムサイズ」の中から埋め込みたい適切なサイズを選択しましょう。

サイズごとに実際埋め込んだのがこちら

サイズ「少」

サイズ「中」

サイズ「大」

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF6

「カスタムサイズ」を選択するとこのように縦と横の比率を細かくカスタム出来ます。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF7

例で 300 × 200 にしてみました。

サイズ 300 × 200

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF8

実際の埋め込み方は、サイズを決めたら「HTMLをコピー」コピーします。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF9

「HTML」記述になるので、「ビジュアルエディタ」から「テキストエディタ」へ切り替えましょう。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF10

そしてさきほどコピーした「HTMLをコピー」をペーストします。

%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF11

「ビジュアルエディタ」へ切り替えなおしたら、ちゃんと埋め込まれているのが確認出来るかと思います。

Google マップを簡単に埋め込む方法は以上になります。

ブログ・コンテンツ作成のお役に立てれば幸いです。

以上

ワードプレス│ブログに、Google マップを簡単に埋め込む方法を詳しく解説

でした。

コメント

タイトルとURLをコピーしました