Twitterの次はGoogle Mapを埋め込んでみよう!【超初心者向け】

ブログ管理Google Map, ブログ管理, 初心者

Google Map埋め込みヘッダー

ぐず夫
ぐず夫
るるら~るらるらるら~♪

トリ師匠
トリ師匠
ご機嫌やの。ええことあったんか?
ぐず夫
ぐず夫
TwitterでダメゲスナーのTLを追ってるんや。
ワシみたいなんがいっぱいでオモロいで。
トリ師匠
トリ師匠
人生の浪費か!
今日はまた別のもんを記事に埋め込んでみぃへんかっちゅう話や。

ということで、今回はTwitterの埋め込みに引き続き、Google Mapの地図を記事に埋め込んでみたいと思います。

Google Mapの埋め込みって?

埋め込むって何を?

ぐず夫
ぐず夫
また何を埋め込むて? さては……
ようやくワシに埋め込まれたチップを除去する気になったか!

トリ師匠
トリ師匠
そんなんワシ知らん。
話を戻すけど、前にTwitterの呟きを記事ん中に埋め込んだやろ。埋め込みついでに、こっちもどやっちゅう提案や。
ぐず夫
ぐず夫
こっち?
どっちやねん。
トリ師匠
トリ師匠
まぁまずは見るのが早いやろ。
こんなんや!


ぐず夫
ぐず夫
なんやこれ、新今宮の駅かいな。
ん、なんや、この地図動くで!

トリ師匠
トリ師匠
てことで、今日はGoogle Mapの埋め込みをやってみよて提案や。ブログに場所とかのっけたい時に便利やろ?
ぐず夫
ぐず夫
オモロいやないか。
やってみるで!!

トリ師匠
トリ師匠
(なんでそんな乗り気やねん…)

早速Google Mapをみてみよう!

トリ師匠
トリ師匠
何はともあれ、まずはマップを見てみんとあかんな。Google Map へ飛んでみて、のっけたい場所を検索するとこから始めよか。
ぐず夫
ぐず夫
ふむふむ。
どこにしよかな。よし、ここや!
トリ師匠
トリ師匠
(…なんでパンダ舎?)
そしたら次は、左側に表示されてる部分に注目するで。項目ん中に「共有」て部分があるで、それをクリックや。

パンダ舎

ぐず夫
ぐず夫
なんや出てきたで?
トリ師匠
トリ師匠
そしたら次は「地図を埋め込む」てタブを選択するんや。

タブを選択

ぐず夫
ぐず夫
おぉ! なんや地図出てきたで!
トリ師匠
トリ師匠
そしたら次は上の方の「下矢印」を選択して、埋め込む地図のサイズを決めるで。項目ん中から「カスタムサイズ」を選択して自分のブログに表示させたいサイズを決めるんやな。「実サイズでプレビュー」押せば、別窓でサイズを確認することもできるで。

埋め込み用地図設定

カスタムサイズ選択

ぐず夫
ぐず夫
ふむふむ。
なら表示サイズは画像に合わせてみるかの。ポチポチっとな!
トリ師匠
トリ師匠
そしたら「利用規約」を読んで、OKやったら最後に「HTMLをコピー」を押して完了や。コピーしたコードは後で使うで無くさんようにな!

サイズ設定

実際に記事に埋め込んでみよう!

トリ師匠
トリ師匠
まずは投稿の準備やな。
分からへん人は、下の本文入力まで進めたら次に進むで。

○ 投稿の前準備はコチラ!

トリ師匠
トリ師匠
そしたら早速埋め込むで。
まずはいつものように「+」ボタン押して、「フォーマット」の項目中の「カスタムHTML」ブロックを選択や。

カスタムHTML選択

トリ師匠
トリ師匠
HTMLブロックが表示されたら、「HTMLを入力」と書かれてるとこに、さっきコピーしたコードを貼っつけてみよか

HTMLブロック貼り付け

ぐず夫
ぐず夫
貼っつけたで。
で、どないや?
トリ師匠
トリ師匠
そしたらブロックメニューの「プレビュー」か、ページの「プレビュー」で実際に確認してみるとええで。
ぐず夫
ぐず夫
なぁトリ。
これどっかでやった覚えがあるんやけどな?
トリ師匠
トリ師匠
そらTwitterの埋め込みと同じやからな。作業も画像も一部除いて使いまわしや。細かく分からへんかったら同じやしそっち見たらええんちゃう。

ぐず夫
ぐず夫
どーりで見たことあるはずや!
ガッツリ手抜きやないか!

クラシックブロックの時はどないや?

トリ師匠
トリ師匠
一応クラシックブロックでの貼り方ものっけとくで。いつもみたいに「+」ボタンを押して、「フォーマット」の「クラシック」ブロックを選択や。

クラシックブロック選択

ぐず夫
ぐず夫
うへぇ、画像使い回しや…
トリ師匠
トリ師匠
(無視無視)
次はブロック右上の「︙」(詳細設定)ボタンを押して、項目ん中から「HTMLとして編集」を選んでみ。

HTML表示切り替え

ぐず夫
ぐず夫
またまた使い回しやで…
トリ師匠
トリ師匠
(またまた無視無視)
画面変わったら、さっきのHTMLコードを貼ったってくれ。これで埋め込みは完了やで、元の編集に戻したければまた「︙」ボタンを押して、選択肢から「ビジュアル編集」を選んだってな。

クラシックブロック貼り付け

ビジュアルモードに戻す

ぐず夫
ぐず夫
おぉ! プレビュー見たら地図表示されてる!

トリ師匠
トリ師匠
最後はいつもみたいに「プレビュー」で実際の表示を確認や。クラシックブロックでの埋め込みはこれで完了やな。
次はクラシックエディタの埋め込みも見とこかの。

クラシックエディタはどやねん?

トリ師匠
トリ師匠
Twitterの埋め込み見た人は分かるやろけど、ごっつ簡単やで。投稿画面を「テキスト」にして、コピーした内容を貼っつけたらしまいや。

クラシックエディタ操作例

ぐず夫
ぐず夫
ごっついい加減に言った!
トリ師匠
トリ師匠
最後に「プレビュー」押して確認したってな。これでGoogle Mapの埋め込みは完了や!

Google Mapを埋め込む注意点?

トリ師匠
トリ師匠
最後に補足やけど、Google Mapをこんな感じで埋め込むのは今んとこ無料なんやけど、いつか規約が変わったら表示でけへんくなるかもしれんから覚えといて。
ぐず夫
ぐず夫
ん? そうなんか?
トリ師匠
トリ師匠
18年の6月から「Google Map API」をつこうた組み込みは一部有料化されたんやけど、今んとこ「iframe(今回みたいな方法)」を使用した埋め込みは無料やねんな。でもあくまで「今は」やねん。
ぐず夫
ぐず夫
はぁ? なんのこっちゃ…
トリ師匠
トリ師匠
今回の埋め込み方やと、地図のデザインとかカスタマイズとかはしにくいんやけど、「Google Map API」ての使うと他にも色々できてな。ま、初心者には不要かもしれへんけど一応補足や。知りたい人は調べてみると楽しいで。
ぐず夫
ぐず夫
ふーん。で、どうすればええの?
トリ師匠
トリ師匠
今は無料やからなんもせんでええよ。今回の方法もいつかでけへんくなるかもしれへんで、覚えといてなってだけや。補足補足。

Google Mapを埋め込んでみて

ぐず夫
ぐず夫
ふふふふふ。
これで我がブログにも地図をのっけられるで。
子パンダを客に公開して大儲けや!
トリ師匠
トリ師匠
…………。
ぐず夫
ぐず夫
な、なんや、その目は?!
トリ師匠
トリ師匠
そんなこと軽々しくしてみぃな。
某国の要人にとんでもなく法外な金品を要求されるで。あの白と黒のベストマッチはな、
……尊いんやで(ミラクルフェイス)。
ぐず夫
ぐず夫
ほ、法外てどんなや?!
トリ師匠
トリ師匠
お主が8万回生まれ変わっても払えへんくらいの額や。諦め。
ぐず夫
ぐず夫
な、なんてことや…
だったら何のためにこんな無駄な作業を…
トリ師匠
トリ師匠
なぁ、お主。
少しは真面目に働く気ぃにならんのか?

ということで、今回はGoogle Mapを記事の中に埋め込んでみました。
皆さんもブログにMapをのっけてみると面白いですよ。オススメです。

ダンパ
ダンパ
でもブログがない?!
そんな方にはWordPressを使ったブログがオススメですよ!

素人でもできるWordPressのブログ立ち上げ手順一覧!

ぐず夫
ぐず夫
でたー、最近よくみる宣伝~♪

ではまた次回。