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