[WP]Advanced Custom FieldsのGoogle Mapを表示する方法｜WordPressプラグイン｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[WP]Advanced Custom FieldsのGoogle Mapを表示する方法

WordPressプラグイン WordPress

Google Map Advanced Custom Fields

スポンサード

WordPressのカスタムフィールド拡張プラグインAdvanced Custom Fieldsで、Google Mapのフィールドに登録した地図情報を出力する方法のご紹介です。

1 Advanced Custom FieldsのGoogle Mapを表示する手順
2 ①CSS
3 ②PHP
4 ③Javascript
5 ④gmap.js

Advanced Custom FieldsのGoogle Mapを表示する手順

以下のAdvanced Custom FieldsのページにCSS、PHP、Javascriptの各コードが書いてありますので、カスタムフィールド名やGoogle Mapを表示させる要素のクラス名を変えるだけで基本的にはOKです。

Advanced Custom FieldsのGoogle Mapを表示する方法

https://www.advancedcustomfields.com/resources/google-map/

①CSS

まずはMapを表示させるためのCSSの記述例です。

<style type="text/css">
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
</style>

.acf-map {

width: 100%;

height: 400px;

border: #ccc solid 1px;

margin: 20px 0;

}

</style>

acf-mapはMapを表示させる要素のクラス名なので、後述するPHPやJavascriptでも出てきます。クラス名は合わせておくようにします。

②PHP

続いて、地図を表示したいページのテンプレートファイルに以下のようなコードを追加します。

<?php 
$location = get_field('googlemap');
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

$location = get_field('googlemap');

if( !empty($location) ):

</div>

get_field(‘googlemap‘);はカスタムフィールド名です。ここはサイトに合わせて変更してみてください。また、acf-mapは①CSSの項目で指定した要素と同じ名前にしておきます。

③Javascript

footer.phpに記述するJavascriptの例です。

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>
<script src="./js/gmap.js"></script>

1 2	<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script> <script src="./js/gmap.js"></script>

1行目のkey=APIキーは、Google Developerで取得したGoogle Maps API Keyを入れます。
※Google Maps API Keyの取得方法はこちらの記事も参考にしてみてください。

2行目のgmap.jsは、以下の④で紹介するJavascriptコードを外部ファイル化したものです。

④gmap.js

③Javascriptと同様、footer.phpに直接書いても良いですが、長いので外部ファイル化しても良いかと思います。

(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);

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

(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);

120行目のacf-mapは①CSSと②PHPで指定したクラス名に合わせます。

参考情報
https://www.advancedcustomfields.com/resources/google-map/

スポンサード