ごけたです。遠出する時はGoogleストリートビューは欠かせません。
はじめに
今回はWordpress編です。
Wordpessの記事内に「Google Map」を表示させてみました。
プラグインをインストールして表示もできるようですが、
極力プラグインの使用は控えたいと思っています。
Google Mapは設定させ覚えてしまえばプラグインを使用しなくても
簡単に表示できることがわかりましたので実践です。
今回は「東京駅」を例にします。
ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
事前準備
検索
Google Mapで目的地を表示するのはまず「検索」です。
今回は「東京駅」を例に使用するでGoogle Chromeで「東京駅」と入力。
入力検索下の「地図」をクリック
検結果下の「地図」または右上の「東京駅」のGoogle Mapをクリックします。
「三」マーク(メニュー)をクリック
Google Mapで「東京駅」が表示されます。
Wordpress内に表示されるには専用のコードをコピペする必要があります。
そのコードを左上の「三」マーク(メニュー)をクリックして表示します。
「地図を共有または埋め込む」をクリック
左上の「三」マーク(メニュー)をクリックして表示されたメニュー内の
「地図を共有または埋め込む」をクリックします。
「地図を埋め込む」をクリック
別ウィンドウで「共有」が表示されます。
ここでは「地図を埋め込む」をクリックします。
地図が表示される
Wordpressに埋め込むウィンドウサイズのMapが表示されます。
デフォルトでは「中」サイズになっています。
このサイズでよければ、地図の上に表示されているURLをコピー(赤枠の箇所)、
WordPressの記事内にペーストします。
※右側に「自分専用の地図」表示が有りますが、このままで構いません。
WordPress上では表示されません。
Mapの表示サイズを変更
Wordpess上で表示するMapサイズを変更したい場合は左上の「中」隣の「▼(下三角)」をクリック。
「大」「中」「小」「カスタムサイズ」を選択、表示出来ます。
「大」「中」「小」はクリックするごとにサイズが変更表示されます。
好みのサイズがある場合は地図の上のURLをコピー、
WordPressの記事内にペーストします。
カスタムサイズでサイズを変更
「大」「中」「小」はGoogleが決めた表示サイズですが、
「カスタムサイズ」では自分で画像サイズで設定できます。
デフォルトでは「800×600」になっています。
ここでは「450×50」で入力してみました。
「実サイズでプレビュー」をクリック
「実サイズでプレビュー」をクリックすると、
入力した数値のMapサイズが確認できます。
これでよければサイズ入力下にある「URL」をコピー、Wordpressにペーストします。
※サイズは問題ないのですが「東京駅」がややアップになり過ぎかと。
「実サイズでプレビュー」の地図、「カスタムサイズ」の
右上の「X」をクリックして、各ウィンドウを一旦閉じます。
「+」「-」で縮尺を調整
「Google Map」右下の「+」「-」で縮尺を調整します。
プレビューで確認
再度、左上の「三(メニュー)」をクリック→「地図を共有または埋め込む」をクリック
→「地図を埋め込む」をクリック→「カスタムサイズ」をクリック
→サイズを入力→「実サイズでプレビュー」をクリック。
→東京駅と周辺の名称も表示されています。
「カスタムサイズ」内のURLをコピー
プレビューで東京駅の縮尺の表示を確認後、問題なければ
上記の「450×350」の縮尺表示をWordpress上で表示させたいので、
「カスタムサイズ」内のURLをコピーします。(赤枠の部分)
Wordpessにログイン
地図のURLをコピーする前に、新規ウィンドウでWordpressにログイン、
地図を表示させる投稿ページを開いた状態で
Mapに戻って地図のURLをコピー、さいどWordpessに戻って表示ページの
該当箇所にペーストします。
地図を表示させるページを開いらからURLのペーストも可能です。
右上の「プレビュー」をクリック。
投稿ページ右上の「プレビュー」をクリックして、
Mapが表示されているか、思い通りのサイズかなどを確認します。
表示に問題が無ければ、「下書きとして保存」、「公開」「更新」の
何れかのボタンをクリックして、変更を保存しします。
WordPressにGoogle Mapをプラグイン無しで表示させる方法は以上になります。
さいごに
今回は「東京駅」と場所を限定したの表示でしたが、
東京駅から新橋駅までの「車」、「電車」、「徒歩」、「自転車」(飛行機)での
ルート案内、時間なども含めて表示することも可能です。
行ったお店の案内に情報の1つとして表示する際に表示すると
サイトに見て頂いた方にもより分かりやすくなるかと。
最後までお付き合いくださいまして有難うございました。