広告 Google ブログ運営関係

ブログにGoogleMapを貼り付け・埋め込む方法について!PC初心者の方でも簡単!

Google Mapをブログ内で表示する方法を知っていますか??

実はとても簡単にブログ内でGoogle Mapを埋め込む事ができるので、やり方を説明していきます!

パソコン初心者の方でも簡単にできます!


GoogleMapをブログで使用する方法について!

Google Mapをブログに貼り付けるのは2つの方法があります。

1つはリンク形式でGoogleMapへのリンクを作成する方法です!

東京スカイツリーの場所だよ!!!(外部リンクに飛ぶよ!)

リンクは上のようになります。(リンクをつける文字は各自設定できます) 

2つはブログ内にGoogleMapを埋め込む方法です!

埋め込むとこんな感じになります。(個人的にはこっちが好きです!)

今回は上の2つの方法を説明していきます!

今回は東京スカイツリーを例に説明していきます。

前準備:貼り付けたい場所を中心に持ってこよう!

まずは、Google Mapを開きます!

www.google.co.jp

次に、ブログに埋め込みたい場所を真ん中に持ってきます!

f:id:itsuwalove777:20191104224502j:plain

上のように、検索欄で検索して真ん中に対象の場所が来るように調整します。

赤ピンを立てると分かりやすくて良いです!

Google Mapのリンクを作成する方法!

前準備が終わったらリンクを作成していきます!

下のように埋め込みたい地図の調整は終わっているものとします。

f:id:itsuwalove777:20191104225947j:plain

赤枠で囲んだ共有ボタンをクリックします。

f:id:itsuwalove777:20191104231018j:plain

共有ボタンをクリックすると、上の画像のように小さなポップアップが出てきます。

この小さなポップアップの中の「リンクをコピー」をクリックするとリンクをコピーすることができます!

コピーしたリンクをブログ内で貼り付けることで、クリックした読者の方をリンクを作成した時点のGoogleMapへとジャンプさせることができます。

GoogleMapの埋め込みを作成する場合

t続いて、GoogleMapをブログに直接埋め込むための手順を説明していきます!

下のように埋め込みたい地図の調整は終わっているものとします。

f:id:itsuwalove777:20191104225947j:plain

埋め込みを作成する場合もリンクを作成する場合と同じく、上の画像の赤枠で囲んだ共有ボタンを押します!

f:id:itsuwalove777:20191104231018j:plain

すると、先ほどのリンクを作成する時と同じく小さなウィンドウが出てきます。

この小さなウィンドウの上の方でタブを切り替えることができます。

f:id:itsuwalove777:20191104231112j:plain

上の画像の赤枠で囲んだ「地図を埋め込む」というタブに変更し、「HTMLをコピー」をクリックします。

この後は、ブログ側で貼り付けるだけでおしまいです!

はてなブログの場合は…

f:id:itsuwalove777:20191104232539j:plain

HTML編集のタブに切り替えて、直接貼り付けます!

おまけ:拡大したり縮小したりして調整!

「もっと縮小した地図を表示したい!!」、「もっと拡大して表示したい!!」という場合も多いと思います。

そんな時はリンクや埋め込みを作成する前に、GoogleMapを操作して地図の倍率を変更します。(PCの場合はページ右下の+とーで調整できます!)

f:id:itsuwalove777:20191104224534j:plain
f:id:itsuwalove777:20191104224613j:plain

上のように、縮小した状態で埋め込みを作成すると、縮小した状態で埋め込みようの地図も作成されます。

こんな感じになります!

GoogleMapのリンク作成も埋め込みも慣れればすぐに作れるようになるので、覚えていて損はないと思います!

簡単にできるので、是非試してみてください!


ここまで

最後までお読みいただきありがとうございます。

-Google, ブログ運営関係