第22回 WordPress 勉強会@松戸 === # 本日のテーマ いろいろな方法で地図を表示したり、カスタマイズしてみたり # 本日のメニュー - Google マップのコードを埋め込む - WordPress の地図系のプラグインを利用する - Simple Map - MapPress Easy Google Maps - WordPress のカスタムフィールド系のプラグインを利用する - Advanced Custom Fields - Google Maps API を利用する # はじめに 今回は地図を表示したり、カスタマイズしたりというテーマでセッションをさせて頂きます。そのため、セッション中はスタイルシートや JavaScript の書き方、WordPressの基本操作などの説明は割愛させて頂きますので了承ください。 もし解らない点やご不明な点などございましたら、後半のもくもく会などをご活用してお尋ねください！ ## Google マップのコードを埋め込む #### 手順 1. Google マップを開く。 2. 埋め込みたい地図やストリートビュー画像を地図上に表示する。 3. 左上のメインメニュー をクリックする。 4. [地図を共有または埋め込む] をクリックする。 5. 表示されるボックスの上部で [地図を埋め込む] タブを選択する。 6. 埋め込みサイズを選択し、そのコードをコピーする。 7. コピーしたコードを、投稿（固定）ページの本文に（テキストモードで）貼り付ける。 ##### サンプルコード ``` <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12939.850288186492!2d139.921136!3d35.825394!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x81e1e152302dafb4!2z5paw5p2-5oi46aeF!5e0!3m2!1sja!2sjp!4v1459146135296" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> ``` #### デモ・サンプル http://wp-matsudo.net/22th/201603/method-1-1/ ## WordPress の地図系のプラグインを利用する ### Simple Map #### 手順 1. プラグイン[Simple Map]をインストールする。 2. 投稿（固定）ページの本文にコードを記入する。 ##### サンプルコード ``` [map]新松戸駅[/map] ``` ##### デモ・サンプルイメージ http://wp-matsudo.net/22th/201603/method-2-1/ #### カスタマイズしてみよう - 貼り付けるショートコードに項目と値を追加 ``` [map addr="新松戸駅" height="400px" infowindow="open" ] 今日はここに集合！ [/map] ``` - functions.php にフィルターフックを記入 ```php:functions.php add_filter( 'simplemap_default_zoom', function(){ return 18; } ); ``` #### 参考 - WordPress.org プラグインページ https://ja.wordpress.org/plugins/simple-map/ ### MapPress Easy Google Maps #### 手順 1. プラグイン[MapPress Easy Google Maps]をインストールする。 2. MapPress タブの[新規マップ]をクリックする。 3. [POIを追加]のテキストエリアに、表示させたい場所を入力して検索マークをクリックする。 4. 保存名を入力・サイズを選択し、[保存]をクリックする。 ##### デモ・サンプル http://wp-matsudo.net/22th/201603/method-2-2/ #### カスタマイズ [ダッシュボード]-[MapPress]をクリックし、管理画面より設定する。 ![](https://i.imgur.com/ARf3aDS.png) #### 参考 - WordPress.org プラグインページ https://ja.wordpress.org/plugins/mappress-google-maps-for-wordpress/ ## WordPress のカスタムフィールド系のプラグインを利用する ### Advanced Custom Fields #### 手順 1. プラグイン[Advanced Custom Fields]をインストールする。 2. [ダッシュボード]-[カスタムフィールド]でカスタムフィールドを作成する。 ![](http://i.imgur.com/jvZSBBT.png) 3. 投稿（固定）ページに追加されたテキストフィールドに表示させたい住所（もしくは、緯度・経度）を入力する。<font style="color:red;font-size:90%">注意）上述の「MapPress Easy Google Maps」と共存させると正しく動かないかも</font> ![](http://i.imgur.com/9xV7G96.png) <font style="color:red">このままでは表示されないので・・・</font> 4. 表示させたいテンプレートファイルの表示させたい場所に追加する。 ``` <?php $location = get_field('location'); 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; ?> ``` 5. そして、オフィシャルサイトの CSS, JS をコピーして作成する。 > 参考）[ACF | Google Map](https://www.advancedcustomfields.com/resources/google-map/) ##### デモ・サンプル http://wp-matsudo.net/22th/method-3-1/ #### カスタマイズ ※ 後述のGoogle Maps API にて説明 #### 参考 - WordPress.org プラグインページ https://ja.wordpress.org/plugins/advanced-custom-fields/ ## Google Maps API を利用する #### 手順 1. 以下を確認して APIキー を取得する。 - [JavaScript API のキーを取得する](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja) - [JavaScript API の使用制限](https://developers.google.com/maps/documentation/javascript/usage?hl=ja) 2. 以下を参考に、コードを作成する。 - [スタートガイド | Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja) ※ 抜粋 ``` <!DOCTYPE html> <html> <head> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script type="text/javascript"> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html> ``` #### 今回は以下のように作成 ① functions.php に、Google MAPS API と JavaScript をロードする記述をする。 ```php:functions.php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_script('gmap-api-mykey', 'https://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false' ); wp_enqueue_script( 'gmap-api-js', get_stylesheet_directory_uri() . '/gmap-api.js' ); } ``` <font style="color:red">（APIキー）は自身のAPIに書き換え</font> ② マップ表示に関する JavaScript（gmap-api.js） を新規に作成する。 ```js:gmap-api.js function initMap() { // 地図の表示場所の要素を取得する var mymap = document.getElementById( 'map' ) ; // 地図の中心位置を指定する var latlng = new google.maps.LatLng(35.826333, 139.921243); // 地図のオプションを設定する var opts = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(mymap, opts); } ``` ③ header.php の body 要素に、上述の initMap() をロードするイベントを追加する。 変更前 ```php:header.php <body <?php body_class(); ?>> ``` 変更後 ```php:header.php <body <?php body_class(); ?> onload="initMap()"> ``` ④ style.css にマップの表示スタイルを指定する。 ```css:style.css #map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } ``` ⑤ 最後に、固定（投稿）ページの表示させたい場所に map という名前の div 要素を作成する。 ``` <div id="map"></div> ``` ##### デモ・サンプル http://wp-matsudo.net/22th/201603/method-4-1/ ![](http://i.imgur.com/7iUGwy1.png) #### カスタマイズ gmap-api.js を編集し、表示をカスタマイズしていきます。 - マーカー（Marker）を表示する 下部 var map = new google.map*** の下に記述。 ``` marker = new google.maps.Marker({ map: map, position: latlng }); ``` ![](http://i.imgur.com/MTrSWaO.png) - マーカー（Marker）のアイコンを変更してアクションを指定する ``` var image = 'http://maps.google.co.jp/mapfiles/ms/icons/pink-pushpin.png' marker = new google.maps.Marker({ map: map, position: latlng, icon: image, animation: google.maps.Animation.DROP }); ``` ![](http://i.imgur.com/RgfWKwJ.png) - スクロールを制御する 中央あたり var opts *** のセクションに追加。 ``` var opts = { zoom: 15, center: latlng, scrollwheel: false, //←スクロール制御を追加 mapTypeId: google.maps.MapTypeId.ROADMAP }; ``` - スタイルを変更する 中央あたり var opts *** の上に追加。 ``` var styleArray = [ { featureType: "all", stylers: [ { saturation: -80 } ] },{ featureType: "road.arterial", elementType: "geometry", stylers: [ { hue: "#00ffee" }, { saturation: 50 } ] },{ featureType: "poi.business", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; ``` 中央あたり var opts *** のセクションに追加。 ``` var opts = { zoom: 15, center: latlng, scrollwheel: false, styles: styleArray, //←スタイルの指定を追加 mapTypeId: google.maps.MapTypeId.ROADMAP }; ``` ![](http://i.imgur.com/0sUZdVJ.png) > - [Code Samples | Google Maps JavaScript API]( https://developers.google.com/maps/documentation/javascript/examples/) > - [Snazzy Maps](https://snazzymaps.com/) #### 参考 - [Google Maps API](https://developers.google.com/maps/?hl=ja) - [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/?hl=ja) # （参考）その他 JavaScript・jQuery のプラグインを利用する - jQuery Google Map http://tilotiti.github.io/jQuery-Google-Map/ https://github.com/Tilotiti/jQuery-Google-Map - Maplace.js http://maplacejs.com/ https://github.com/danielemoraschi/maplace.js - gmaps.js https://hpneo.github.io/gmaps/ https://github.com/hpneo/gmaps
Last changed by  
 
三柴 誠一郎
2935
Published on HackMD