地図の画像を表示する
投稿日: / 更新日:
コンテンツに地図の画像を出力したい場合に便利なショートコードを紹介します。座標とサイズを指定するだけで、Google Static Maps APIを手軽に利用できます。
コード
関数
下記を、お使いのテーマのfunctions.phpに追加して下さい。fireが関数名で、doがショートコード名です。自身の環境に合わせて変更して下さいね。なお、Google Static Maps APIは、基本的にAPIキーの指定が必要です。APIキーを指定しない場合、何度かリクエストがあるとすぐに画像が表示されなくなってしまいます。本番環境では、3行目の$api_keyにAPIキーをセットしましょう。また、デフォルトのクラス属性はsyncer__static-mapsとなっていますが、6行目の$class_attrで変更できます。
function fire( $args=array(), $content="" ) {
// APIキー (取得方法→https://syncer.jp/how-to-use-google-static-maps-api)
$api_key = "" ;
// クラス属性
$class_attr = "syncer__static-maps" ;
if( !isset($args["center"]) || !isset($args["size"]) || 2 > count( ( $sizes = explode( "x", $args["size"] ) ) ) ) {
return "[ centerとsizeは指定必須です…。 ]" ;
}
$params = array(
"center" => $args["center"] ,
"sensor" => "false" ,
"size" => $args["size"] ,
"scale" => 2 ,
"zoom" => 16 ,
"markers" => $args["center"] ,
) ;
if( isset($args["zoom"]) ) $params["zoom"] = $args["zoom"] ;
if( isset($args["maptype"]) ) $params["maptype"] = $args["maptype"] ;
if( isset($args["language"]) ) $params["language"] = $args["language"] ;
if( isset($args["markers_visible"]) && $args["markers_visible"] == "nodisplay" ) unset( $params["markers"] ) ;
if( isset($args["markers_color"]) ) $params["markers"] = "color:" . $args["markers_color"] . "|" . $params["markers"] ;
if( isset($args["markers_size"]) ) $params["markers"] = "size:" . $args["markers_size"] . "|" . $params["markers"] ;
return '<img src="https://maps.googleapis.com/maps/api/staticmap?' . ( $api_key ? "key=" . $api_key . "&" : "" ) . http_build_query( $params ) . '" width="' . $sizes[0] . '" height="' . $sizes[1] . '" alt="地図" class="' . $class_attr . '">' ;
}
add_shortcode( "do", "fire" ) ;使い方
本文で次のように利用できます。ショートコードの引数に、center(地図の中心座標)、size(画像の横幅と高さ)を指定して下さい。モバイルなどのRetina Displayにも対応しています。
[do center="35.7945, 139.79081" size="300x200"]引数に問題がなければ、本文には次のように、Google Static Mapsの地図画像がimgタグで出力されます。
<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.7945%2C+139.79081&sensor=false&size=300x200&scale=2&zoom=16&markers=35.7945%2C+139.79081" width="300" height="200" alt="地図" class="syncer__static-maps">カスタマイズ
基本的には、座標とサイズの指定だけで地図を表示することができますが、それ以外にも様々な引数を指定できます。用途に合わせて、使い分けて下さいね。
| 項目 | 説明 |
|---|---|
| center | 中心座標。 |
| size | 画像の横幅と高さ。横幅x高さで指定。 |
| zoom | ズーム値。 |
| maptype | 地図の種類。roadmap(初期値)、satellite、hybrid、terrainから指定。 |
| language | 言語。jaなら日本語、enなら英語。 |
| markers_visible | マーカーの表示状態。nodisplayを指定するとマーカーが設置されない。 |
| markers_color | マーカーの色。black、brown、green、purple、yellow、blue、orange、gray、red、white、またはカラーコード(#FFFFCCの場合は0xFFFFCC)を直接指定。 |
| markers_size | マーカーの大きさ。tiny、small、midから指定。 |
APIキー
APIキーの取得方法は、下記記事をご参考下さい。
中心座標
座標を調べるには、ジオコーディングのサービスが手軽でオススメです。
