Googleマップを埋め込むと利便性がアップします
こんにちは。WEBディレクターの金川です。
今日は、自分でWEBサイトあるいはブログを立ち上げて運用することができるプログラム、WordPressを利用していく上で役立ちそうな小技あるいはTipsを一つご紹介させていただきます。
これはWordPressの投稿ページあるは固定ページに、Googleマップを埋め込む方法です。
ホームページ、ブログ問わず、ビジネスユースでWordPressを利用されている方にとっては有益な情報かもですよ。
Googleマップを埋め込むことは割りとポピュラーなことだとボクは思ってたんですが、先日こんな事例を目にしまして、こりゃ案内する意味有るなあと思った次第です。
その事例ですが、ページにGoogleマップを埋め込みたいのに、その方法が分からないので、GoogleマップをPC上でスクリーンショットを撮ってカットして、画像としてページに貼る付けられていました。
↓こんな感じです。画像そのものでマップ操作はできません。
何も無いよりはぜんぜん良いんですが、やはりGoogleマップを操作することができる方が親切ですよね。
↓Googleマップを埋め込んだ例です。縮小・拡大・移動ができますし、大きい画面で見れるGoogleマップにジャンプすることもできます。
やはり埋め込んだ方が良いですよね。
では具体的にWordPessのページにGoogleマップを埋め込む方法を解説します。
対象とする住所（所在地）はこれです。
大阪府吹田市五月が丘北１−１７
Googleで住所を検索する
▼まずはGoogleで住所を検索します。
▼するとこんな検索結果が表示されます。
そして地図のどこでも良いので、地図上のどこかをクリックします。
▼するとGoogleマップ上で希望の住所が表示されました。
地図の埋め込みコードを取得する
意味は分からなくても大丈夫なので付いてきてくださいね。
▼「共有」ボタンをクリックします。
▼こんなボックスが表示されるので「地図を埋め込む」タブをクリック。
▼生成された「埋め込みコード」をコピーします。
ざっと観ていただきますね。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3276.6934439076504!2d135.5281933443484!3d34.788491954413!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e35eea8fd265%3A0xf52fa7f9088b71f5!2z44CSNTY1LTA4MzQg5aSn6Ziq5bqc5ZC555Sw5biC5LqU5pyI44GM5LiY5YyX77yR4oiS77yR77yX!5e0!3m2!1sja!2sjp!4v1492080162627″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
まるで呪文か暗号です。
なので意味は分かる必要は一切ないのでご安心ください（笑）
ここまでで地図の受けこみコードの取得はOKです。
埋め込みコードをWordPressのページに貼り付ける
▼WordPressのページ編集画面です。普段は「ビジュアルモード」で編集することがほとんどですが、地図埋め込みコードを貼り付ける時だけは、「テキストモード」へ変更します。
「テキスト」タブをクリックすることで「テキストモード」へ変更できます。
▼テキストモード状態で、本文にさきほどコピーした埋め込みコードを貼り付けます。
▼コード貼り付けできたらビジュルアルタブをクリックして、通常のビジュアルモードに戻ります。
ちゃんとGoogleマップがページに埋め込まれてますね。
▼実際に埋め込んだ例をもう一度。あれこれ触れます。
このように、難しい事は抜きにして、この流れを追いかけるだけで必ず出来ますので、どうぞチャレンジなさってくださいね。
本日は以上です。
