Google MapをWordPressに貼り付ける方法(もくもく会)
今回は、Google MapをWordPressに貼り付ける方法を紹介していきます。基本的な貼り付け方はGoogle Mapからコードを取得し、WordPressのページ作成時に貼り付けるだけ、という風にとても簡単に行うことが出来ます。
ただ貼り付けるだけではなく、縦横のサイズも変更したり、マップのデザインを少し変えてみたりすることもできます。
他にもプラグインを使ってGoogle Mapを表示する方法や、ストリートビューの埋め込み方法、複数の場所を表示したMAPの表示方法等、ちょっとしたことですが、参考にしていただけたらと思います。
誰もが使っているGoogle MapをWordPressに貼り付ける方法
グーグルマップをWordPressサイトへ貼り付ける具体的な方法を説明していきますね。先に結論を言うと、グーグルマップからHTMLデータを取得して貼り付ける…以上です！簡単でしょ？
…とっても具体的にどうするのか？というところは一度やってみないとわかりませんよね。なので、１つ１つ詳しく説明していきます！
Google Map(グーグルマップ)を開く
まずは兎にも角にもグーグルマップを開きましょう。検索で「グーグルマップ」と入力して検索すると一発です。グーグルマップを開いたら、埋め込みをしたい場所を検索してください。
目的の場所を検索、「共有」をクリック
グーグルマップは開きましたか？次は表示したい目的の場所を検索します。ひとまず最寄りの駅である“西条駅”を表示することにします。グーグルマップで“西条駅”と入力して、目的の駅の情報を表示させます。
目的の場所は検索できましたか？検索されると、上の画像のような画面になっていると思います。目的の場所が表示された状態で、「共有」をクリックしてください。
「地図を埋め込む」を選択
グーグルマップで表示したい目的の場所を検索、「共有」をクリックすると下の画面になるかと思います。次に、「地図を埋め込む」をクリックしてください。
「HTMLをコピー」を選択
「共有」のクリックから、「地図を埋め込む」をクリックしました。そうすると、下のような画面が出てきたかと思います。ここで「HTMLをコピー」という場所があるのでクリックします。クリックすると目的の地図の埋め込みに必要なコードがPCにコピーされます。
WordPressの埋め込みたいページ編集画面で、「カスタムHTML」を選択し貼り付ける
ここからWordPressの編集に入ります。「HTMLをコピー」した状態で、貼り付けしたいWordPressページの編集画面へ移動します。まずは貼り付けたい箇所で新しいブロックを開きます。
新しいブロックは「カスタムHTML」を使います。
「カスタムHTML」のアイコンをクリックすると、コードを入力する枠が現れます。この枠に、先程グーグルマップからコピーした「HTML」を貼り付けます。
無事表示完了
「カスタムHTML」を選択し、コピーしたHTMLを貼り付けしたら無事表示されるかを確認しましょう！確認方法は、下の画像の通り「プレビュー」という箇所をクリックするだけ。
無事表示できたみたいですね！ここで上手に表示されない場合は、再度グーグルマップからHTMLコードを表示させ、コピー、貼り付けをしてみてください。
縦横のサイズを変更する方法
さてWordPressのページにグーグルマップが貼り付けできたよ！・・・だけどサイズがちょっと合ってない？
そんなときは縦横のサイズを指定してみましょう。方法は2通りあります。グーグルマップでHTMLをコピー前にサイズを指定しておく、もう一つはコピーしたHTMLを直接編集する…という方法です。どちらも超簡単なので、やりやすい方法でやってみてください。
Google Mapで「共有」→「地図を埋め込む」の画面でサイズ調整
グーグルマップで表示したい目的の位置を検索、「共有」をクリックして「地図を埋め込む」を選択した後…HTMLをコピーする前に下の画像の通り、「中」と表示された位置をクリックします。
そうすると、小・中・大・カスタムサイズ、と表示されます。ここで予めサイズを決めることができます。
大体の目安ですが、WordPressだと幅が800pxくらいがちょうど良い幅です。高さは300〜600pxくらいがPC画面やスマホ画面に適しているかと思います。
「地図を埋め込む」の画面でコピーした「HTML」を修正する(簡単)
縦横のサイズを変更する方法として、HTMLを修正をする方法があります。HTMLと言ってもグーグルマップでコピーしたものを、ほんの少しだけ変更するだけです。それはどこかと言うと…
“width”と“height”の数値を変更するだけ！
“width”とは横幅の事で、“height”は高さを表します。単位はpxです。
なので、上記は“width＝600”と“height＝450”となっているので、幅600px、縦450pxということになります。
拡大・縮小を変更する方法
グーグルマップからHTMLコードをコピー、WordPressに貼り付けると自分の思ったより拡大、もしくは縮小されて表示されていたりしませんか？
もっと周囲の細かいお店とかが表示されてほしいのに、日本地図に近いくらい引いている状態で表示されちゃうんですけど…というときはこの方法で解決できます。
それは、グーグルマップで目的の場所を検索した後に「共有」をクリックする前に…右に表示されている縮尺を事前に調整しておく方法です。この右に表示されている縮尺が、埋め込み時の表示となります。なので、もう少し寄った地図を表示したいときは、ググッと寄せた状態で表示させて、それから「共有」をクリックすればOKです。
テキストと横並びにして地図を表示する方法
すこしだけWordPressのデザイン方法について説明してみます。テキストと横並びにして地図を表示したい場合はどうするのか？という事で、簡単な例を紹介します。
まず地図を貼り付けたい場所にブロックを設置するのですが、まずは貼り付けたい場所にブロックを設置します。
追加するブロックは「カラム」です。この「カラム」はWordPressのテーマに限らず設置されているデフォルト機能なので探してみてください。
「カラム」をクリックすると、どの割合で枠を並べるか？を選択できます。今回は左側に地図を大きめに貼り付けて、右側に少しテキストで説明文を入れてみたいと思います。まずは70/30をクリックして、横並びに表示されたブロックを設置します。
左側に地図を埋め込みたいので、左側のブロックをクリックします。そうすると、再度ブロック追加の選択が出てくるので、「カスタムHTML」をクリックしてグーグルマップから取得したHTMLコードを貼り付けます。
右側にはテキストを入れるので、「段落」をクリックしてテキストを打ち込みます。
地図のデザインを変更する方法
グーグルマップはちょっとしたアレンジをすることができます。中でもJava ScriptやGoogle Maps Platformを使用したカスタマイズは、オリジナル感のあるデザインに仕上げることができ、とても魅力的です。
しかし、そのJava ScriptやGoogle Maps Platformを使用する方法ではGoogleの“API”を使用した方法になり、現在28,000回/月の表示を超えると有料となっています。カスタマイズ方法も貼り付けの方法に比べて難しくなっています。
今回は、HTMLコードを貼り付けるだけで埋め込みする方法を前提に、ある程度誰でもできる方法をサクッとご紹介します。
GoogleMy Mapを利用
Googleにはグーグルマイマップというサービスがあります。このグーグルマイマップを使って特定の位置の情報を共有したり、上記のようにWordPressのページへ貼り付けることが出来ます。
そのときに上記のような若干の表示方法を変更することができて、変更した表示のまま貼り付けることができます。
CSSでちょっとしたデザイン変更
埋め込み表示したグーグルマップに、CSSを使うことで色味の変更行うことが出来ます。CSSとは、主に見た目を整える為の言語です。このCSSでオリジナリティあふれる…とまではいきませんがちょっとした変化をつけることが出来ます。
明るめのグレーに変えてみる【filter:grayscale(100%);】
ダークモード風にしてみる【filter: grayscale(100%) invert(92%) contrast(83%);】
コントラストを変えてみる【filter: grayscale(50%);】
セピア色にしてみる【filter: sepia(40%);】
色を反転してみる【filter: invert(80%);】
番外編：グーグルストリートビューを埋め込む方法
グーグルマップの他に、グーグルストリートビューを埋め込む方法があります。こちらもグーグルマップ同様にHTMLコードを所定の位置からコピーして、WordPressの「カスタムHTML」を使って埋め込む方法になります。
プラグインを使用したGoogle Mapの表示方法
[map address=”東広島市西条町” width=”100%” height=”300px” height_m=”300px” api=”AIzaSyBqWILXj9BR70l7RAJVdZ5xTF_tfcRiv2g” theme=”girly” class=” ” zoom=”15″ draggable=”true” controls=”true”]
こちらはプラグインを使用したグーグルマップの表示方法になります。使用しているのは【TCD Google Map】というプラグインになります。これはGoogleの“API”を使用しています。
ちなみにAPIは「Application Programming Interface」の略語で、簡単に言うと「他サービスの能力を借りるための窓口」というような意味があります。ここでは「グーグルマップの能力を借りて自分のサービスを作成する方法」ということになります。
さてさて、このグーグルマップの“API”を使用すると月間28,000回/月以上表示されると有料となります。
例のために表示してみましたが、基本的には埋め込みコードを使用した方法が簡単でおすすめです。ゴリゴリにカスタマイズすると手間がかかりますしね…。
複数の場所を表示しているMAPを貼り付ける方法
グーグルマップでは複数の場所を表示することが出来ます。これはグーグルマイマップというサービスを使用して表示させる方法になります。
やり方は簡単で、グーグルマイマップで複数箇所の場所を登録、その登録したMAPを共有すると上のような表示が可能になります。
まとめ
今回はグーグルマップの埋め込み方法を紹介しました！後半はいろいろな寄り道をしましたが、埋め込み自体は非常に簡単にできる方法です。ぜひともお手持ちのWordPressサイトで場所を紹介するときに使ってみてください。
今回のようなちょっとしたことだけど意外と知らなかったりする方法をギュッとまとめた本がこちら↓オススメの1冊なので、お持ちでない方は手元に置いておいてはどうでしょうか！