【WordPress】Advanced Custom Fieldsを使って、Googleストリートビューを表示させる

いくつもある店舗をWordpressで登録・管理したいという案件。

そのページ内に、店舗の周辺環境をGoogleストリートビューで表示させたいという要望があったのでメモ。

【※2018/10/18追記】
この手法はGoogle Maps Platform APIを使用します。
こちらの記事を参考に、Google Maps Platform APIキーを取得してください。

店舗のページは、情報の各項目を大好きなAdvanced Custom Fieldsプラグインを使って登録するようにしていました。

そのいつものフィールドの編集画面で「フィールドタイプ」の中に「Google Map」というのがあります。（公式ドキュメント：ACF | Google Map）

これで取得できた緯度・経度の値が利用できそうだなーと思っていたところ、こちらの記事を拝見して、
・汎用ストリートビューコード取得 – WEB Tool Box – SQLの窓
緯度・経度を置き換えるだけでいけそうやん！ってことで実装。

Advanced Custom FieldsでGoogle Mapのフィールドを用意したら、テンプレートのGoogleストリートビューを表示させたいところに下記を挿入。（single.phpなど）

<?php
//カスタムフィールドの値を取得（field-nameはフィールド名に置き換え）
$location = get_field('field-name');
?>
<script src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー">
<script type="text/javascript">
function loadStreetView554e094c620b6(doc,obj_str,a,b,c,d) {
	var latlng = new google.maps.LatLng(a,b);
	var myOptions = {
		position: latlng,
		addressControl: true,
		pov: {
			heading: c,
			pitch: d,
			zoom:1
		},
		visible: true
	};
	var myPano = new google.maps.StreetViewPanorama(doc.getElementById(obj_str), myOptions);
}
document.write("<div id='target_area' style='width: 600px; height: 480px'></div>");
google.maps.event.addDomListener(window, 'load', function () {
	loadStreetView554e094c620b6(document,"target_area",<?php echo $location['lat']; ?>,<?php echo $location['lng']; ?>,0,0);
});
</script>

5行目で、Google Maps APIを読み込んでいます。

21行目で、表示エリアの幅・高さを指定。

そして、23行目の
<?php echo $location['lat']; ?>,<?php echo $location['lng']; ?>
ここがフィールドで取得した緯度・経度を放り込むところ。

ちなみに直後の0,0の数値、最初の値は東西南北の向きで、-180〜180の間で設定できるようです。0だと北向き、90だと西向き。

2番目の値は上下の向きで、0は正面、90で空向き、-90で地面向き。

手軽にできました^^

クライアントがパソコンに慣れているとか、一つ一つ向きやズームを設定したいとかであれば、素直に埋め込み用のコードをペーストするだけのテキストフィールドを用意しておけばいいのでしょうけど、そうでなければ投稿画面内で完結する方がきっと親切ですよね〜。