第22回 WordPress 勉強会@松戸

本日のテーマ

いろいろな方法で地図を表示したり、カスタマイズしてみたり

本日のメニュー

Google マップのコードを埋め込む
WordPress の地図系のプラグインを利用する
- Simple Map
- MapPress Easy Google Maps
WordPress のカスタムフィールド系のプラグインを利用する
- Advanced Custom Fields
Google Maps API を利用する

はじめに

今回は地図を表示したり、カスタマイズしたりというテーマでセッションをさせて頂きます。そのため、セッション中はスタイルシートや JavaScript の書き方、WordPressの基本操作などの説明は割愛させて頂きますので了承ください。
もし解らない点やご不明な点などございましたら、後半のもくもく会などをご活用してお尋ねください！

Google マップのコードを埋め込む

手順

Google マップを開く。
埋め込みたい地図やストリートビュー画像を地図上に表示する。
左上のメインメニューをクリックする。
[地図を共有または埋め込む] をクリックする。
表示されるボックスの上部で [地図を埋め込む] タブを選択する。
埋め込みサイズを選択し、そのコードをコピーする。
コピーしたコードを、投稿（固定）ページの本文に（テキストモードで）貼り付ける。

サンプルコード

<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

手順

プラグイン[Simple Map]をインストールする。
投稿（固定）ページの本文にコードを記入する。

サンプルコード

[map]新松戸駅[/map]

デモ・サンプルイメージ

http://wp-matsudo.net/22th/201603/method-2-1/

カスタマイズしてみよう

貼り付けるショートコードに項目と値を追加

[map addr="新松戸駅" height="400px" infowindow="open" ]
今日はここに集合！
[/map]

functions.php にフィルターフックを記入

add_filter( 'simplemap_default_zoom', function(){
    return 18;
} );

参考

WordPress.org プラグインページ
https://ja.wordpress.org/plugins/simple-map/

MapPress Easy Google Maps

手順

プラグイン[MapPress Easy Google Maps]をインストールする。
MapPress タブの[新規マップ]をクリックする。
[POIを追加]のテキストエリアに、表示させたい場所を入力して検索マークをクリックする。
保存名を入力・サイズを選択し、[保存]をクリックする。

デモ・サンプル

http://wp-matsudo.net/22th/201603/method-2-2/

カスタマイズ

[ダッシュボード]-[MapPress]をクリックし、管理画面より設定する。

参考

WordPress.org プラグインページ
https://ja.wordpress.org/plugins/mappress-google-maps-for-wordpress/

WordPress のカスタムフィールド系のプラグインを利用する

Advanced Custom Fields

手順

プラグイン[Advanced Custom Fields]をインストールする。
[ダッシュボード]-[カスタムフィールド]でカスタムフィールドを作成する。

投稿（固定）ページに追加されたテキストフィールドに表示させたい住所（もしくは、緯度・経度）を入力する。注意）上述の「MapPress Easy Google Maps」と共存させると正しく動かないかも

このままでは表示されないので・・・
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; ?>

そして、オフィシャルサイトの CSS, JS をコピーして作成する。

参考）ACF | 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 を利用する

手順

以下を確認して APIキーを取得する。

以下を参考に、コードを作成する。

スタートガイド | Google Maps JavaScript API

※ 抜粋

<!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 をロードする記述をする。

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' );
}

（APIキー）は自身のAPIに書き換え

② マップ表示に関する JavaScript（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() をロードするイベントを追加する。
変更前

<body <?php body_class(); ?>>

変更後

<body <?php body_class(); ?> onload="initMap()">

④ 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/

カスタマイズ

gmap-api.js を編集し、表示をカスタマイズしていきます。

マーカー（Marker）を表示する
下部 var map = new google.map*** の下に記述。

marker = new google.maps.Marker({
	map: map,
	position: latlng
});

マーカー（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
});

スクロールを制御する
中央あたり 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
};

Code Samples | Google Maps JavaScript API

Snazzy Maps

参考

（参考）その他 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