Contents
はじめに
クライアントからたまに自分でGoogleMapを埋め込みたいという要望があります。そのまま埋め込んでください！言っても中々ハードルが高い。
なので、Advanced Custom Fieldsを使って
住所を入力するだけでGoogleマップを
表示するようにする方法をログとして残したいと思います。
設定方法
公式サイトにはこんな感じで書かれてます。
英語ばかりなのは仕方ないんだけど、こういう時に辛いっすね。。
今回はちょこっとだけ変えました。ほぼコピペだけど。。
Advanced Custom Fieldsをインストール後GoogleMapの設定をします。
- 管理画面からカスタムフィールド→カスタムフィールドを選択
- 新規追加ボタンをクリック
- タイトルをつける(今回はGoogleMapサンプル)
- フィールドを追加してフィールドラベル(管理画面に表示されるラベル)とフィールド名を入力。
- フィールドタイプで[GoogleMap]を選ぶ。
- その他設定は必要であれば行います。特に位置はこの設定をどこで使うのか？投稿なのか固定なのか？
など設定することができます。今回は投稿タイプを使用します。
その後、入れたいテンプレートにソースコードを埋め込む。そうすると記事に
住所入力欄が表示されて、住所を入力するとGoogleMapが表示されます。
今回はtwentyfifteenに入れてみます。
入れるソースコードは2種類。設定部分と表示部分です。入れる場所はテーマや入れたい場所によって異なるけど今回、設定はheader.phpの<?php wp_head(); ?>の下に入れます。(表示部分は後で。)
GoogleMapの埋め込みにはJQueryの記述が必要になるので<?php wp_head() ?>;の下に
入れる必要があります。
この時、ちゃんと条件分岐を入れるのを忘れずに。
そうしないと全てのページに表示されちゃいます。
(今回のサンプルでは入れません。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
<style type="text/css"> .acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } </style> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <script type="text/javascript"> (function($) { /* * new_map * * This function will render a Google Map onto the selected jQuery element * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param $el (jQuery element) * @return n/a */ function new_map( $el ) { // var var $markers = $el.find('.marker'); // vars var args = { zoom : 16, center : new google.maps.LatLng(0, 0), mapTypeId : google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map( $el[0], args); // add a markers reference map.markers = []; // add markers $markers.each(function(){ add_marker( $(this), map ); }); // center map center_map( map ); // return return map; } /* * add_marker * * This function will add a marker to the selected Google Map * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param $marker (jQuery element) * @param map (Google Map object) * @return n/a */ function add_marker( $marker, map ) { // var var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); // create marker var marker = new google.maps.Marker({ position : latlng, map : map }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { // create info window var infowindow = new google.maps.InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'click', function() { infowindow.open( map, marker ); }); } } /* * center_map * * This function will center the map, showing all markers attached to this map * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param map (Google Map object) * @return n/a */ function center_map( map ) { // vars var bounds = new google.maps.LatLngBounds(); // loop through all markers and create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // only 1 marker? if( map.markers.length == 1 ) { // set center of map map.setCenter( bounds.getCenter() ); map.setZoom( 16 ); } else { // fit to bounds map.fitBounds( bounds ); } } /* * document ready * * This function will render each map when the document is ready (page has loaded) * * @type function * @date 8/11/2013 * @since 5.0.0 * * @param n/a * @return n/a */ // global var var map = null; $(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); }); })(jQuery); </script> |
今回のサンプルには直接CSSを書き込んでるけど、
導入する時はCSSはキチンとstyle.cssとかに入れます。
(よく考えたらCSSわけたら3つだけど今回は2つということで。。)
次に表示させたい箇所に表示部分のソースコードを導入します。
get_fieldのmapはフィールド名です。
一番最初にやったフィールド名に合わせてください。
今回は投稿でブログを書いた記事の下に表示させるようにします。contents.phpの<footer class=”entry-footer”>の下です。
|
1 2 3 4 5 6 7 8 9 |
<?php $location = get_field(‘map’); if( !empty($location) ): ?> <div class="acf-map"> <div class="marker" data-lat="<?php echo $location[‘lat’]; ?>" data-lng="<?php echo $location[‘lng’]; ?>"></div> </div> <?php endif; ?> |
実際の入力をしてみる
では、いつものように投稿からブログを書いてみます。テキスト入力欄の下に住所入力欄が増えています。ここで住所を入力してみましょう。サンプルは東京タワーです。
さいごに
こんな感じで表示されます。
