[み]WordPressでショートコードを使ってGoogleマップを表示させる方法

ショートコードのすばらしさに目覚めたみはら(@masashi_385)です。
知らず知らず使っていたショートコードですが、調べれば調べるほど賢くてデキルやつだというのがわかってきました。
で、さっそく今回はそのショートコードを使って、Googleマップを表示させる方法を紹介します。
いつものWordPressシリーズのようにコピペでOKですので、どんどん使ってください。

ショートコードでGoogleマップを表示する方法

まずは、このコードを functions.php にコピペしてください。

function G_Maps($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '600',
      "height" => '450',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed"></iframe>';
}
add_shortcode("googlemaps", "G_Maps");

そして、Googleマップを表示させたいところにこのコードです。

[googlemaps width="幅" height="高さ" src="GoogleマップのURL"]

幅と高さは書かなくてもOKです。
書かないと、デフォルトにした600×450で表示されます。
なので、面倒な方は

[googlemaps src="GoogleマップのURL"]

でOKです。
しかも、辞書登録とかしてしまえば本当にカンタンにGoogleマップを表示できるようになります:)

では、ためしに、こないだまた行った秋田市のマシンガンを表示してみます。
コードはこれです。

[googlemaps src="https://maps.google.co.jp/maps?q=39.724664,140.144144&ll=39.724633,140.144077&spn=0.001879,0.002792&num=1&brcurrent=3,0x5f8fc29d97b09f5d:0xb50887d613e49c9b,0&t=m&z=19"]

で、表示されるのがこれです。
[googlemaps src=”https://maps.google.co.jp/maps?q=39.724664,140.144144&ll=39.724633,140.144077&spn=0.001879,0.002792&num=1&brcurrent=3,0x5f8fc29d97b09f5d:0xb50887d613e49c9b,0&t=m&z=19″]
カンタンですね。

まぁ、ショートコードはステキなんですが、GoogleマップのURLをコピーすんのがめんどくさいですね…

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup