Googleマップ や ヤフー地図はほぼコピペだけでOK!プラグインは必要なし!

スポンサーリンク

ワードプレスにはGoogleマップを挿入するプラグインってよくありますよね?

ヤフー地図を挿入するプラグインもあるのかな?

 

しかし、よほどのこだわりがなければプラグインを使用する必要はありません!

プラグインを入れてワードプレスの動作が遅くなるくらいなら、直接マップからHTMLをコピペした方が手っ取り早いです。

 

という事で今回はヤフー地図とGoogleマップの挿入方法をチェックしてみましょう!

スポンサーリンク

ヤフー地図で挿入したいところを探す。

 

「ヤフー地図」で検索するとヤフー地図が出てきますよね。

Baidu IME_2016-8-6_17-4-34

今回はUSJを検索してみました。

USJ関連情報が沢山でてきました

「USJ」関連の場所がたくさん出てきてしまったので、その中から「ユニバーサルスタジオジャパン」を選択

USJの場所がアップで登場!

このままでは、地図の範囲が狭すぎて周辺に何があるのかわかりづらいです。

縮尺サイズを好みのサイズに変更しましょう!

Baidu IME_2016-8-6_17-6-40

好みのサイズにしたら右上のURLをクリックします。

右上のURLをクリック

するとURLHTMLが表示されるので、HTML全文をコピーしましょう!

ヤフー地図のHTML全文をコピー

 

このHTMLタグを貼り付けたのが以下のこれになります↓↓↓



タグ内の【width=480&height=360】の数字の部分を変更するとサイズが変わります。

今回は【width=480&height=360】を削除して【width=600&height=200】にしてみました↓↓↓



どうですか?サイズが変わりましたね♪

 

Googleマップを記事内に挿入してみよう!

Googleマップで検索したら上位にリンクが表示されました。

Googleマップで検索してみた

リンクをクリックするとGoogleマップが表示されたので、左上の枠に今回もUSJと入力してみると、

早速USJと入力したらユニバーサルスタジオジャパンが表示されました

ユニバーサルスタジオジャパンが画像と一緒に登場しました。

縮尺を調整して広範囲の地図を表示してみた

範囲が狭すぎて周囲の状況がわからなかったので、右下の「+-」で調整。広範囲を表示してみます。

グーグルマップの検索メニューはここ

先程「USJ」と検索した検索窓内にメニューアイコンがあるので、クリックしてみると、

Baidu IME_2016-8-6_17-37-29

メニューがずらっと並びました。

 

今回は「地図を共有または埋め込む」をクリック

共有URLが出てきました

リンクを共有するためのURLが出てきましたが、「リンクを共有」の隣にある「地図を埋め込む」をクリックしてみましょう。

グーグルマップ埋め込み用のHTMLが表示されました

↑このHTMLをコピーしたら記事内にペーストして終了なんですが、

 

グーグルマップはサイズを変更できます

Googleマップは「小」「中」「大」「カスタマイズ」から選んでサイズを変更する事ができます

 



カスタマイズで【600×200】のサイズに指定したんですが、どうやらGoogleマップは横幅100%で表示されるようです。

 

 

ヤフー地図・Googleマップの注意

ここまで記事にマップを挿入する方法を紹介しましたが、

実は記事編集中、

  • ヤフー地図が画面に表示されない
  • Googleマップが指定のサイズ通りに表示されている

という状況でした。

 

つまり、公開している記事編集画面の記事とでは見た目が違うってことです。

(環境によっては同じかもしれませんが・・・)

 

プレビューをチェックしながら記事挿入するようにしましょうね!

 

 

ヤフー地図やGoogleマップはどこにでも挿入できる♪

ヤフー地図やGoogleマップは殆どどの部分にでも挿入できます。

サイドバー内
ヘッダー部分
フッター部分
記事上
記事下
無料ブログの記事の中

などなど、殆どどの部分にでもOKです。

ワードプレスのプラグインが通用しない無料ブログ内に挿入出来るのは嬉しいですよね!

Baidu IME_2016-8-6_17-27-58※協力:レンタルオート

こんな感じで会社概要として紹介もできます。

ぜひプラグインに頼らずに地図を活用してみてください。

ブログランキングに参加しています。

共感できればクリックお願いしますm(_ _)m

コメントを残す

*