第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