acfで地図を表示 - ネットアンサー備忘録

acfで地図を表示

－2016年04月16日－

出力方法についてのみ記述します。コピペでOK。
acf公式サイト
ドラッグ禁止、スクロール禁止
地図の色を変えたい
?、Google APIを利用しています。

`1`	`<script` `src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>`

?css

1.acf-map {
2           width: 100%;
3           height: 400px;
4           border: #ccc solid 1px;
5           margin: 20px 0;
6          }

?js

1(function($) {
2 
3/*
4*  new_map
5*
6*  This function will render a Google Map onto the selected jQuery element
7*
8*  @type    function
9*  @date    8/11/2013
10*  @since   4.3.0
11*
12*  @param   $el (jQuery element)
13*  @return  n/a
14*/
15 
16function new_map( $el ) {
17     
18    // var
19    var $markers = $el.find('.marker');
20     
21     
22    // vars
23    var args = {
24        zoom        : 16,
25        center      : new google.maps.LatLng(0, 0),
26        mapTypeId   : google.maps.MapTypeId.ROADMAP
27    };
28     
29     
30    // create map               
31    var map = new google.maps.Map( $el[0], args);
32     
33     
34    // add a markers reference
35    map.markers = [];
36     
37     
38    // add markers
39    $markers.each(function(){
40         
41        add_marker( $(this), map );
42         
43    });
44     
45     
46    // center map
47    center_map( map );
48     
49     
50    // return
51    return map;
52     
53}
54 
55/*
56*  add_marker
57*
58*  This function will add a marker to the selected Google Map
59*
60*  @type    function
61*  @date    8/11/2013
62*  @since   4.3.0
63*
64*  @param   $marker (jQuery element)
65*  @param   map (Google Map object)
66*  @return  n/a
67*/
68 
69function add_marker( $marker, map ) {
70 
71    // var
72    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
73 
74    // create marker
75    var marker = new google.maps.Marker({
76        position    : latlng,
77        map         : map
78    });
79 
80    // add to array
81    map.markers.push( marker );
82 
83    // if marker contains HTML, add it to an infoWindow
84    if( $marker.html() )
85    {
86        // create info window
87        var infowindow = new google.maps.InfoWindow({
88            content     : $marker.html()
89        });
90 
91        // show info window when marker is clicked
92        google.maps.event.addListener(marker, 'click', function() {
93 
94            infowindow.open( map, marker );
95 
96        });
97    }
98 
99}
100 
101/*
102*  center_map
103*
104*  This function will center the map, showing all markers attached to this map
105*
106*  @type    function
107*  @date    8/11/2013
108*  @since   4.3.0
109*
110*  @param   map (Google Map object)
111*  @return  n/a
112*/
113 
114function center_map( map ) {
115 
116    // vars
117    var bounds = new google.maps.LatLngBounds();
118 
119    // loop through all markers and create bounds
120    $.each( map.markers, function( i, marker ){
121 
122        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
123 
124        bounds.extend( latlng );
125 
126    });
127 
128    // only 1 marker?
129    if( map.markers.length == 1 )
130    {
131        // set center of map
132        map.setCenter( bounds.getCenter() );
133        map.setZoom( 16 );
134    }
135    else
136    {
137        // fit to bounds
138        map.fitBounds( bounds );
139    }
140 
141}
142 
143/*
144*  document ready
145*
146*  This function will render each map when the document is ready (page has loaded)
147*
148*  @type    function
149*  @date    8/11/2013
150*  @since   5.0.0
151*
152*  @param   n/a
153*  @return  n/a
154*/
155// global var
156var map = null;
157 
158$(document).ready(function(){
159 
160    $('.acf-map').each(function(){
161 
162        // create map
163        map = new_map( $(this) );
164 
165    });
166 
167});
168 
169})(jQuery);

?php

1<?php 
2 
3$location = get_field('location');
4 
5if( !empty($location) ):
6?>
7<div class="acf-map">
8    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
9</div>
10<?php endif; ?>