Googlマップを埋め込むぞ！

2023年4月27日

前回に引き続き、ホームページ作成に興味ない方が読んだら「何だこりゃ？」と思われそうな内容です(^^;)ｺﾞﾒﾝﾅｻｲ

これまで、みとう学習塾のホームページの下部やサイドバーに表示されていた地図↓

この地図の「カーマ様」ですが、かなり前に名前が「DCＭ様」に変わりました。

地図、「DCM様」に変えといてねー( ´ ▽ ` )ﾉ

随分軽くおっしゃいますね(^^;

あ、塾長のアイコン画像は、我が家の初代ハムスター“まめ太郎”です。

さて、忙しかったこともあるんですが、地図を直せなかったのには理由があります。

ホームページを作成したのは、かれこれ3年前。
開業当初は生徒数も淋しい限りで時間がたっぷりあり、ネットにあふれる色々な情報を元に地図の画像を作ったのですが…自分で作っておきながら、どうやって地図を作ったのか全然覚えていない…(^^;

今の自分は「画像＝Canva」
なのに、Canvaに地図の画像が残っていない！！Σ(･ω･ﾉ)ﾉ！
数日考えて、思い出しました。

あ！GIMPで作ったんだ！！

あれ？
GIMPってどうやって使うんだっけ？(・・?

地図を作って以来GIMPを使っていなかったせいで、使い方をすっかり忘れている始末(^^;
「Canvaで地図を作り直すか…」と、思っていたその時。
なんと！Googleマップを埋め込めるという情報を発見！！

Googleマップを埋め込めれば、近隣のお店の名前が変わっても問題なし！！

ネット情報によると、Googleマップを埋め込むには、
Googleマップで「みとう学習塾」を表示→埋め込む地図のサイズを選択→HTMLコードをコピー→ホームページ内にそれを貼り付ける
とのことφ(ﾟДﾟ )ﾌﾑﾌﾑ…

HTMLコードって何？と思われた方。
前回のブログにもHTMLコードについて少し触れたのですが、実は私もよく分かりません(^^;

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。
「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉です。例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。
https://udemy.benesse.co.jp/design/web-design/what-is-html.html

ということですが…謎です(^^;

実際のHTMLコードを見ると、<p>とか</p>とかいっぱい書いてあるので、それぞれの<>に何か意味があるんだろうなぁ～くらいしかわかりませんでした(^^;

さて、ネット情報の手順通り、GoogleマップのHTMLコードのコピーして、ホームページに貼り付けたのですが、Googleマップが表示されない( ；∀；)
プレビューで見ると、HTMLコードの長～い文字列が、<p>とか</p>とかがそのまま表示されているだけで、Googleマップに変換されないんです。

ワタシのような凡凡人が
Googleマップを貼り付けようってのが
無理なんだ(ノД`)・゜・。

と、ほぼ諦めたのですが…。

前回のブログにも書いたのですが、このホームページはWordPressというもので作成しています。
HTMLコードを使わなくても、Wordで文書を作るような感覚でホームページを作れる優れもの°˖✧◝(⁰▿⁰)◜✧˖°

文字以外にも画像とか表とか、何を挿入するかボタン1つで選択できるのですが…見つけたんです！

「カスタムHTML」というボタンを！！！！

「HTMLって書いてあるし、もしやこのボタン！？」と恐る恐る押し、先程コピーしたHTMLコードを貼り付けると、なんということでしょう！
無事にGoogleマップが表示されたではないですか！！ヾ(*´∀｀*)ﾉ

晴れて、ホームページにGoogleマップを埋め込むことができたわけです。

ところで、このホームページには、パソコンで見ると右側に「サイドバー」と呼ばれる部分があります。
PROFILEとか新着情報とかが表示されている部分です。
スマホだと、メニューから「サイドバー」を選択するか、ページの一番下までスクロールすると表示されます。

そのサイドバーにも地図を載せているんですが…

サイドバーの編集画面って
どうやって入れるんだ…(-ω-;)

３年前にホームページを作成して以来、ほぼいじっていなかったサイドバー。
編集の仕方以前に、編集画面そのものに入れない始末。

こちらもありがたいことに、ネットで調べて無事解決！
ところが…