[wp] GoogleMaps を記事本文内に埋め込むショートコードの作成(基本)

各記事ごとにマップを埋め込むのはプラグイン使えばいいんだけど、
地図のポイントと記事を連動させる必要がない場合もあるし、
WordPressのページ機能で作成されたページ（例えば会社概要だとか）にだけ埋め込みたいとか、
地図に表示するマーカーが複数あるとか、タブで表示する情報を自由に制御したい…なんてケースもあるわけで。

プラグイン使うほどでもないならショートコード自作して埋め込めばいいじゃないか！ 😀 という記事です

GoogleMaps ShortCode

以下ソースをfunctions.phpやページテンプレートの中にコピペする。
コピペしたらAPIキーを編集すること。

ページテンプレートの作成はこの記事で解説してます。

/*
Google Maps ShortCode
by:tenderfeel(tenderfeel@gmail.com)
*/
$google_apikey =”ADD_YOUR_API_KEY”;//APIキーを入れる

function googlemap_shortcode($atts,$content=null) {

$default = array(
‘width’=>’100%’,
‘height’=>’500px’,
‘lat’ => ‘35.689184’,
‘lng’ => ‘139.691648’,
‘zoom’=> ’10’,
‘marker’=>’true’,
‘zoomcontroler’=>’false’,
‘controler’=>’true’,
‘navlabel’=>’false’,
‘maptype’=>’3’,
‘scale’=>’false’,
‘overview’=>’true’,
‘wheelzoom’=>’false’,
‘clickzoom’=>’true’,
‘html’=>'””‘
);
$atts = shortcode_atts($default, $atts);

if($content!=null){
$atts[‘html’] = ‘”‘.preg_replace(“/\r|\n/”,”
“,trim(wp_filter_kses($content))).'”‘;
}

$script =’‘.”\n”;

$script .= ““; $script.=’‘.”\n”; $script.=’

‘; EOM; return $script; } add_shortcode(‘Gmap’, ‘googlemap_shortcode’); [/php]

JavaScript

gmap.jsというファイル名で下記ソースをコピペし、アクティブテーマのディレクトリに保存する。 [js] //Google Maps::by tenderfeel(tenderfeel@gmail.com) google.load(“maps”, “2”,{“callback” : mapsLoaded,”language” : “ja”}); function mapsLoaded() { if (google.maps.BrowserIsCompatible()) { var map = new google.maps.Map2(document.getElementById(gmConfig.gmDivID)); var point = new google.maps.LatLng(gmConfig.gmLat,gmConfig.gmLng); var marker = new google.maps.Marker(point); if(gmConfig.LMap_Controler){map.addControl(new google.maps.LargeMapControl3D());} if(gmConfig.Type3_Controler){map.addControl(new google.maps.MapTypeControl());} if(gmConfig.Type2_Controler){map.addControl(new google.maps.HierarchicalMapTypeControl());} if(gmConfig.Scale_Controler){map.addControl(new google.maps.ScaleControl());} if(gmConfig.OV_Controler){map.addControl(new google.maps.OverviewMapControl());} if(gmConfig.SmallZoomControl){map.addControl(new google.maps.SmallZoomControl3D());} if(gmConfig.NavLabelControl){map.addControl(new google.maps.NavLabelControl());} if(gmConfig.WheelZoom){map.enableScrollWheelZoom();} if(gmConfig.DClickZoom){map.enableDoubleClickZoom();} map.setCenter(point,gmConfig.gmScope); if(gmConfig.markerAdd){map.addOverlay(marker);} if(gmConfig.WindowHTML != “” && gmConfig.markerAdd){ google.maps.Event.addListener(marker, ‘click’, function() {marker.openInfoWindow(gmConfig.WindowHTML);});} else if(gmConfig.WindowHTML != “” && !gmConfig.markerAdd){map.openInfoWindow(point,gmConfig.WindowHTML);} } window.onunload=function(){google.maps.Unload();} } [/js]

ショートコードの使い方

記事本文内で[Gmap] と書くとマップが表示されます。 何も属性をつけずに書いた場合はデフォルト値（東京都庁）が適用されるので、 任意の場所を表示するために属性を活用してください。

属性一覧

カッコはデフォルト値

width

(100%) 地図の横幅

height

(500px) 地図の縦幅

lat

(35.689184) マーカーlat座標

lng

(139.691648) マーカーlng座標

zoom

(10) 拡大率

marker

(true)　マーカーを表示するかどうか

zoomcontroler

(false) ズームコントローラーを表示するかどうか

controler

(true)　コントローラーを表示するかどうか

navlabel

(false)　ナビゲーションレベルコントローラーを表示するかどうか

maptype

(3)　地図タイプ切り替え

scale

(false) スケールコントローラを表示するかどうか

overview

(true)　右下の縮小地図

wheelzoom

(false)　ホイールでのズーム操作

clickzoom

(true)　ダブルクリックでのズーム操作

html

(“”)　情報ウィンドウのHTML

GoogleMaps 座標検索のページで配布しているスクリプトと同じ。

属性の書き方

上記属性については次のように指定してください。

[Gmap width="500px" lat="35.689184"]

html属性についてはショートコードの中に何か記入しても有効です。

[Gmap]

Hellow

何かコメントを入れてください

[/Gmap]

この場合、無駄な改行や不正なタグは除去されます。 ダウンロード：[download id="71" format="1"] これだけだと激しくGoogle Maps Anywhereで事足りるじゃないか、と思うわけなんだけれどもｗ 応用編に続きます。