質問編集履歴

6

追記

2016/08/10 10:42

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -216,7 +216,7 @@
216
216
 
217
217
  'libraries' => 'places',
218
218
 
219
- 'key' => 'AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI', // Googleで発行したキーを用意する
219
+ 'key' => 'AIzaSyBuGtj2-fUkT7MI6XQpL********', // Googleで発行したキーを用意する
220
220
 
221
221
  'client' => ''
222
222
 

5

修正

2016/08/10 10:42

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -74,544 +74,528 @@
74
74
 
75
75
 
76
76
 
77
- APIて紐づけたURLを修正した後、少しして下記ようなエラー文章が表示されました。
77
+ ###fuctions.php実行したカスタム投稿タイプ内容
78
78
 
79
79
  ```ここに言語を入力
80
80
 
81
+ /add_action('init', 'register_post_type_and_taxonomy');
82
+
83
+ function register_post_type_and_taxonomy()
84
+
85
+ {
86
+
87
+ register_post_type( // カスタム投稿タイプを定義するための関数
88
+
89
+ 'propaty'); // カスタム投稿タイプ名
90
+
91
+ $labels = array(
92
+
93
+ 'name' => _x('物件情報', 'post type general name'),
94
+
81
- http://*****.net/wp/wp-content/themes/*****/css/index.css
95
+ 'singular_name' => _x('物件情報一覧', 'post type singular name'),
96
+
82
-
97
+ 'add_new' => _x('新規物件の追加', 'property'),
98
+
99
+ 'add_new_item' => __('物件情報を記入'),
100
+
101
+ 'edit_item' => __('物件情報を編集'),
102
+
83
- Failed to load resource:
103
+ 'new_item' => __('新規物件情報'),
104
+
84
-
105
+ 'view_item' => __('物件情報の確認'),
106
+
85
- the server responded with a status of 404 (Not Found)
107
+ 'search_items' => __('物件情報を探す'),
108
+
109
+ 'not_found' => __('物件情報はありません'),
110
+
111
+ 'not_found_in_trash' => __('ゴミ箱に物件情報はありません'),
112
+
113
+ 'parent_item_colon' =>''
114
+
115
+ );
116
+
117
+ $args = array(
118
+
119
+ 'labels' => $labels,
120
+
121
+ 'public' => true,
122
+
123
+ 'publicly_queryable' => true,
124
+
125
+ 'show_ui' => true,
126
+
127
+ 'query_var' => true,
128
+
129
+ 'rewrite' => true,
130
+
131
+ 'capability_type' => 'post',
132
+
133
+ 'hierarchical' => true,
134
+
135
+ 'menu_position' => 5,
136
+
137
+ 'supports' => array('title','editor','thumbnail','custom-fields','excerpt','author','revisions','page-attributes'),
138
+
139
+ 'has_archive' => true
140
+
141
+ );
142
+
143
+ register_post_type('property',$args);
144
+
145
+
146
+
147
+ /* カテゴリタクソノミー(カテゴリー分け)を使えるように設定する */
148
+
149
+ register_taxonomy(
150
+
151
+ 'orijinal_themes_cat', /* タクソノミーの名前 */
152
+
153
+ 'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
154
+
155
+ array(
156
+
157
+ 'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
158
+
159
+ 'update_count_callback' => '_update_post_term_count',
160
+
161
+ 'label' => 'オリジナルテーマ作成カテゴリー',
162
+
163
+ 'singular_label' => 'オリジナルテーマ作成カテゴリー',
164
+
165
+ 'public' => true,
166
+
167
+ 'show_ui' => true
168
+
169
+ )
170
+
171
+ );
172
+
173
+ /* カスタムタクソノミー、タグを使えるようにする */
174
+
175
+ register_taxonomy(
176
+
177
+ 'orijinal_themes_tag', /* タクソノミーの名前 */
178
+
179
+ 'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
180
+
181
+ array(
182
+
183
+ 'hierarchical' => false,
184
+
185
+ 'update_count_callback' => '_update_post_term_count',
186
+
187
+ 'label' => 'オリジナルテーマ作成タグ',
188
+
189
+ 'singular_label' => 'オリジナルテーマ作成タグ',
190
+
191
+ 'public' => true,
192
+
193
+ 'show_ui' => true
194
+
195
+ )
196
+
197
+ );
198
+
199
+ }
200
+
201
+
86
202
 
87
203
  ```
88
204
 
89
- どこかのパスが間違っているのでしょうか。
205
+
90
-
91
-
92
-
206
+
93
- ###fuctions.phpに実行したカスタム投稿タイプの内容
207
+ ###fuctions.phpに実行したgooglemapAPIの内容
94
208
 
95
209
  ```ここに言語を入力
96
210
 
97
- /add_action('init', 'register_post_type_and_taxonomy');
98
-
99
- function register_post_type_and_taxonomy()
100
-
101
- {
102
-
103
- register_post_type( // カスタム投稿タイプを定義するための関数
104
-
105
- 'propaty'); // カスタム投稿タイプ名
106
-
107
- $labels = array(
108
-
109
- 'name' => _x('物件情報', 'post type general name'),
110
-
111
- 'singular_name' => _x('物件情報一覧', 'post type singular name'),
112
-
113
- 'add_new' => _x('新規物件の追加', 'property'),
114
-
115
- 'add_new_item' => __('物件情報を記入'),
116
-
117
- 'edit_item' => __('物件情報を編集'),
118
-
119
- 'new_item' => __('新規物件情報'),
120
-
121
- 'view_item' => __('物件情報の確認'),
122
-
123
- 'search_items' => __('物件情報を探す'),
124
-
125
- 'not_found' => __('物件情報はありません'),
126
-
127
- 'not_found_in_trash' => __('ゴミ箱に物件情報はありません'),
128
-
129
- 'parent_item_colon' =>''
130
-
131
- );
132
-
133
- $args = array(
134
-
135
- 'labels' => $labels,
136
-
137
- 'public' => true,
138
-
139
- 'publicly_queryable' => true,
140
-
141
- 'show_ui' => true,
142
-
143
- 'query_var' => true,
144
-
145
- 'rewrite' => true,
146
-
147
- 'capability_type' => 'post',
148
-
149
- 'hierarchical' => true,
150
-
151
- 'menu_position' => 5,
152
-
153
- 'supports' => array('title','editor','thumbnail','custom-fields','excerpt','author','revisions','page-attributes'),
154
-
155
- 'has_archive' => true
156
-
157
- );
158
-
159
- register_post_type('property',$args);
160
-
161
-
162
-
163
- /* カテゴリタクソノミー(カテゴリー分け)を使えるように設定する */
164
-
165
- register_taxonomy(
166
-
167
- 'orijinal_themes_cat', /* タクソノミーの名前 */
168
-
169
- 'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
170
-
171
- array(
172
-
173
- 'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
174
-
175
- 'update_count_callback' => '_update_post_term_count',
176
-
177
- 'label' => 'オリジナルテーマ作成カテゴリー',
178
-
179
- 'singular_label' => 'オリジナルテーマ作成カテゴリー',
180
-
181
- 'public' => true,
182
-
183
- 'show_ui' => true
184
-
185
- )
186
-
187
- );
188
-
189
- /* カスタムタクソノミー、タグを使えるようにする */
190
-
191
- register_taxonomy(
192
-
193
- 'orijinal_themes_tag', /* タクソノミーの名前 */
194
-
195
- 'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
196
-
197
- array(
198
-
199
- 'hierarchical' => false,
200
-
201
- 'update_count_callback' => '_update_post_term_count',
202
-
203
- 'label' => 'オリジナルテーマ作成タグ',
204
-
205
- 'singular_label' => 'オリジナルテーマ作成タグ',
206
-
207
- 'public' => true,
208
-
209
- 'show_ui' => true
210
-
211
- )
212
-
213
- );
211
+ //カスタムフィールドのgooglemap
212
+
213
+ add_filter('acf/fields/google_map/api', function () {
214
+
215
+ return array(
216
+
217
+ 'libraries' => 'places',
218
+
219
+ 'key' => 'AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI', // Googleで発行したキーを用意する
220
+
221
+ 'client' => ''
222
+
223
+ );
224
+
225
+ });
226
+
227
+
228
+
229
+ ```
230
+
231
+
232
+
233
+ ###テンプレートファイルsingle-property.phpに実行した内容
234
+
235
+ ```ここに言語を入力
236
+
237
+ <!-- google map -->
238
+
239
+ <p>
240
+
241
+ <?php
242
+
243
+ $location = get_field('google-map');
244
+
245
+ if( !empty($location) ):
246
+
247
+ ?>
248
+
249
+ <div class="acf-map">
250
+
251
+ <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
252
+
253
+ </div>
254
+
255
+ <?php endif; ?>
256
+
257
+ </p>
258
+
259
+ <!-- //google map -->
260
+
261
+ ```
262
+
263
+ ###外部化したjsファイルの読み込み
264
+
265
+ ```ここに言語を入力
266
+
267
+ <!-- ACF googlemap-api -->
268
+
269
+ <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
270
+
271
+ <?php wp_enqueue_script( 'googlemapapi', get_bloginfo( 'stylesheet_directory'). '/js/googlemapapi.js', array(), false, true ); ?>
272
+
273
+ <!-- //ACF googlemap-api -->
274
+
275
+ ```
276
+
277
+ ###外部化したjsファイル
278
+
279
+ ```ここに言語を入力
280
+
281
+ (function($) {
282
+
283
+
284
+
285
+ /*
286
+
287
+ * render_map
288
+
289
+ *
290
+
291
+ * This function will render a Google Map onto the selected jQuery element
292
+
293
+ *
294
+
295
+ * @type function
296
+
297
+ * @date 8/11/2013
298
+
299
+ * @since 4.3.0
300
+
301
+ *
302
+
303
+ * @param $el (jQuery element)
304
+
305
+ * @return n/a
306
+
307
+ */
308
+
309
+
310
+
311
+ function render_map( $el ) {
312
+
313
+
314
+
315
+ // var
316
+
317
+ var $markers = $el.find('.marker');
318
+
319
+
320
+
321
+ // vars
322
+
323
+ var args = {
324
+
325
+ zoom : 16,
326
+
327
+ center : new google.maps.LatLng(0, 0),
328
+
329
+ mapTypeId : google.maps.MapTypeId.ROADMAP
330
+
331
+ };
332
+
333
+
334
+
335
+ // create map
336
+
337
+ var map = new google.maps.Map( $el[0], args);
338
+
339
+
340
+
341
+ // add a markers reference
342
+
343
+ map.markers = [];
344
+
345
+
346
+
347
+ // add markers
348
+
349
+ $markers.each(function(){
350
+
351
+
352
+
353
+ add_marker( $(this), map );
354
+
355
+
356
+
357
+ });
358
+
359
+
360
+
361
+ // center map
362
+
363
+ center_map( map );
364
+
365
+
214
366
 
215
367
  }
216
368
 
217
369
 
218
370
 
371
+ /*
372
+
373
+ * add_marker
374
+
375
+ *
376
+
377
+ * This function will add a marker to the selected Google Map
378
+
379
+ *
380
+
381
+ * @type function
382
+
383
+ * @date 8/11/2013
384
+
385
+ * @since 4.3.0
386
+
387
+ *
388
+
389
+ * @param $marker (jQuery element)
390
+
391
+ * @param map (Google Map object)
392
+
393
+ * @return n/a
394
+
395
+ */
396
+
397
+
398
+
399
+ function add_marker( $marker, map ) {
400
+
401
+
402
+
403
+ // var
404
+
405
+ var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
406
+
407
+
408
+
409
+ // create marker
410
+
411
+ var marker = new google.maps.Marker({
412
+
413
+ position : latlng,
414
+
415
+ map : map
416
+
417
+ });
418
+
419
+
420
+
421
+ // add to array
422
+
423
+ map.markers.push( marker );
424
+
425
+
426
+
427
+ // if marker contains HTML, add it to an infoWindow
428
+
429
+ if( $marker.html() )
430
+
431
+ {
432
+
433
+ // create info window
434
+
435
+ var infowindow = new google.maps.InfoWindow({
436
+
437
+ content : $marker.html()
438
+
439
+ });
440
+
441
+
442
+
443
+ // show info window when marker is clicked
444
+
445
+ google.maps.event.addListener(marker, 'click', function() {
446
+
447
+
448
+
449
+ infowindow.open( map, marker );
450
+
451
+
452
+
453
+ });
454
+
455
+ }
456
+
457
+
458
+
459
+ }
460
+
461
+
462
+
463
+ /*
464
+
465
+ * center_map
466
+
467
+ *
468
+
469
+ * This function will center the map, showing all markers attached to this map
470
+
471
+ *
472
+
473
+ * @type function
474
+
475
+ * @date 8/11/2013
476
+
477
+ * @since 4.3.0
478
+
479
+ *
480
+
481
+ * @param map (Google Map object)
482
+
483
+ * @return n/a
484
+
485
+ */
486
+
487
+
488
+
489
+ function center_map( map ) {
490
+
491
+
492
+
493
+ // vars
494
+
495
+ var bounds = new google.maps.LatLngBounds();
496
+
497
+
498
+
499
+ // loop through all markers and create bounds
500
+
501
+ $.each( map.markers, function( i, marker ){
502
+
503
+
504
+
505
+ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
506
+
507
+
508
+
509
+ bounds.extend( latlng );
510
+
511
+
512
+
513
+ });
514
+
515
+
516
+
517
+ // only 1 marker?
518
+
519
+ if( map.markers.length == 1 )
520
+
521
+ {
522
+
523
+ // set center of map
524
+
525
+ map.setCenter( bounds.getCenter() );
526
+
527
+ map.setZoom( 16 );
528
+
529
+ }
530
+
531
+ else
532
+
533
+ {
534
+
535
+ // fit to bounds
536
+
537
+ map.fitBounds( bounds );
538
+
539
+ }
540
+
541
+
542
+
543
+ }
544
+
545
+
546
+
547
+ /*
548
+
549
+ * document ready
550
+
551
+ *
552
+
553
+ * This function will render each map when the document is ready (page has loaded)
554
+
555
+ *
556
+
557
+ * @type function
558
+
559
+ * @date 8/11/2013
560
+
561
+ * @since 5.0.0
562
+
563
+ *
564
+
565
+ * @param n/a
566
+
567
+ * @return n/a
568
+
569
+ */
570
+
571
+
572
+
573
+ $(document).ready(function(){
574
+
575
+
576
+
577
+ $('.acf-map').each(function(){
578
+
579
+
580
+
581
+ render_map( $(this) );
582
+
583
+
584
+
585
+ });
586
+
587
+
588
+
589
+ });
590
+
591
+
592
+
593
+ })(jQuery);
594
+
595
+
596
+
219
597
  ```
220
598
 
221
-
222
-
223
- ###fuctions.phpに実行したgooglemapAPIの内容
224
-
225
- ```ここに言語を入力
226
-
227
- //カスタムフィールドのgooglemap用
228
-
229
- add_filter('acf/fields/google_map/api', function () {
230
-
231
- return array(
232
-
233
- 'libraries' => 'places',
234
-
235
- 'key' => 'AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI', // Googleで発行したキーを用意する
236
-
237
- 'client' => ''
238
-
239
- );
240
-
241
- });
242
-
243
-
244
-
245
- ```
246
-
247
-
248
-
249
- ###テンプレートファイルsingle-property.phpに実行した内容
250
-
251
- ```ここに言語を入力
252
-
253
- <!-- google map -->
254
-
255
- <p>
256
-
257
- <?php
258
-
259
- $location = get_field('google-map');
260
-
261
- if( !empty($location) ):
262
-
263
- ?>
264
-
265
- <div class="acf-map">
266
-
267
- <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
268
-
269
- </div>
270
-
271
- <?php endif; ?>
272
-
273
- </p>
274
-
275
- <!-- //google map -->
276
-
277
- ```
278
-
279
- ###外部化したjsファイルの読み込み
280
-
281
- ```ここに言語を入力
282
-
283
- <!-- ACF googlemap-api -->
284
-
285
- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
286
-
287
- <?php wp_enqueue_script( 'googlemapapi', get_bloginfo( 'stylesheet_directory'). '/js/googlemapapi.js', array(), false, true ); ?>
288
-
289
- <!-- //ACF googlemap-api -->
290
-
291
- ```
292
-
293
- ###外部化したjsファイル
294
-
295
- ```ここに言語を入力
296
-
297
- (function($) {
298
-
299
-
300
-
301
- /*
302
-
303
- * render_map
304
-
305
- *
306
-
307
- * This function will render a Google Map onto the selected jQuery element
308
-
309
- *
310
-
311
- * @type function
312
-
313
- * @date 8/11/2013
314
-
315
- * @since 4.3.0
316
-
317
- *
318
-
319
- * @param $el (jQuery element)
320
-
321
- * @return n/a
322
-
323
- */
324
-
325
-
326
-
327
- function render_map( $el ) {
328
-
329
-
330
-
331
- // var
332
-
333
- var $markers = $el.find('.marker');
334
-
335
-
336
-
337
- // vars
338
-
339
- var args = {
340
-
341
- zoom : 16,
342
-
343
- center : new google.maps.LatLng(0, 0),
344
-
345
- mapTypeId : google.maps.MapTypeId.ROADMAP
346
-
347
- };
348
-
349
-
350
-
351
- // create map
352
-
353
- var map = new google.maps.Map( $el[0], args);
354
-
355
-
356
-
357
- // add a markers reference
358
-
359
- map.markers = [];
360
-
361
-
362
-
363
- // add markers
364
-
365
- $markers.each(function(){
366
-
367
-
368
-
369
- add_marker( $(this), map );
370
-
371
-
372
-
373
- });
374
-
375
-
376
-
377
- // center map
378
-
379
- center_map( map );
380
-
381
-
382
-
383
- }
384
-
385
-
386
-
387
- /*
388
-
389
- * add_marker
390
-
391
- *
392
-
393
- * This function will add a marker to the selected Google Map
394
-
395
- *
396
-
397
- * @type function
398
-
399
- * @date 8/11/2013
400
-
401
- * @since 4.3.0
402
-
403
- *
404
-
405
- * @param $marker (jQuery element)
406
-
407
- * @param map (Google Map object)
408
-
409
- * @return n/a
410
-
411
- */
412
-
413
-
414
-
415
- function add_marker( $marker, map ) {
416
-
417
-
418
-
419
- // var
420
-
421
- var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
422
-
423
-
424
-
425
- // create marker
426
-
427
- var marker = new google.maps.Marker({
428
-
429
- position : latlng,
430
-
431
- map : map
432
-
433
- });
434
-
435
-
436
-
437
- // add to array
438
-
439
- map.markers.push( marker );
440
-
441
-
442
-
443
- // if marker contains HTML, add it to an infoWindow
444
-
445
- if( $marker.html() )
446
-
447
- {
448
-
449
- // create info window
450
-
451
- var infowindow = new google.maps.InfoWindow({
452
-
453
- content : $marker.html()
454
-
455
- });
456
-
457
-
458
-
459
- // show info window when marker is clicked
460
-
461
- google.maps.event.addListener(marker, 'click', function() {
462
-
463
-
464
-
465
- infowindow.open( map, marker );
466
-
467
-
468
-
469
- });
470
-
471
- }
472
-
473
-
474
-
475
- }
476
-
477
-
478
-
479
- /*
480
-
481
- * center_map
482
-
483
- *
484
-
485
- * This function will center the map, showing all markers attached to this map
486
-
487
- *
488
-
489
- * @type function
490
-
491
- * @date 8/11/2013
492
-
493
- * @since 4.3.0
494
-
495
- *
496
-
497
- * @param map (Google Map object)
498
-
499
- * @return n/a
500
-
501
- */
502
-
503
-
504
-
505
- function center_map( map ) {
506
-
507
-
508
-
509
- // vars
510
-
511
- var bounds = new google.maps.LatLngBounds();
512
-
513
-
514
-
515
- // loop through all markers and create bounds
516
-
517
- $.each( map.markers, function( i, marker ){
518
-
519
-
520
-
521
- var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
522
-
523
-
524
-
525
- bounds.extend( latlng );
526
-
527
-
528
-
529
- });
530
-
531
-
532
-
533
- // only 1 marker?
534
-
535
- if( map.markers.length == 1 )
536
-
537
- {
538
-
539
- // set center of map
540
-
541
- map.setCenter( bounds.getCenter() );
542
-
543
- map.setZoom( 16 );
544
-
545
- }
546
-
547
- else
548
-
549
- {
550
-
551
- // fit to bounds
552
-
553
- map.fitBounds( bounds );
554
-
555
- }
556
-
557
-
558
-
559
- }
560
-
561
-
562
-
563
- /*
564
-
565
- * document ready
566
-
567
- *
568
-
569
- * This function will render each map when the document is ready (page has loaded)
570
-
571
- *
572
-
573
- * @type function
574
-
575
- * @date 8/11/2013
576
-
577
- * @since 5.0.0
578
-
579
- *
580
-
581
- * @param n/a
582
-
583
- * @return n/a
584
-
585
- */
586
-
587
-
588
-
589
- $(document).ready(function(){
590
-
591
-
592
-
593
- $('.acf-map').each(function(){
594
-
595
-
596
-
597
- render_map( $(this) );
598
-
599
-
600
-
601
- });
602
-
603
-
604
-
605
- });
606
-
607
-
608
-
609
- })(jQuery);
610
-
611
-
612
-
613
- ```
614
-
615
599
  ###状態
616
600
 
617
601
  ダッシュボード上の表示

4

追記

2016/08/10 10:36

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -72,7 +72,23 @@
72
72
 
73
73
  ```
74
74
 
75
+
76
+
77
+ APIにて紐づけたURLを修正した後、少しして下記のようなエラー文章が表示されました。
78
+
79
+ ```ここに言語を入力
80
+
81
+ http://*****.net/wp/wp-content/themes/*****/css/index.css
82
+
83
+ Failed to load resource:
84
+
85
+ the server responded with a status of 404 (Not Found)
86
+
75
- こちらは
87
+ ```
88
+
89
+ どこかのパスが間違っているのでしょうか。
90
+
91
+
76
92
 
77
93
  ###fuctions.phpに実行したカスタム投稿タイプの内容
78
94
 
@@ -210,87 +226,171 @@
210
226
 
211
227
  //カスタムフィールドのgooglemap用
212
228
 
213
- function my_acf_google_map_api( $api ){
214
-
215
-
216
-
217
- $api['key'] = '発行したキーを入力済み';
229
+ add_filter('acf/fields/google_map/api', function () {
218
-
219
-
220
-
230
+
221
- return $api;
231
+ return array(
232
+
222
-
233
+ 'libraries' => 'places',
234
+
223
-
235
+ 'key' => 'AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI', // Googleで発行したキーを用意する
236
+
237
+ 'client' => ''
238
+
239
+ );
240
+
241
+ });
242
+
243
+
244
+
245
+ ```
246
+
247
+
248
+
249
+ ###テンプレートファイルsingle-property.phpに実行した内容
250
+
251
+ ```ここに言語を入力
252
+
253
+ <!-- google map -->
254
+
255
+ <p>
256
+
257
+ <?php
258
+
259
+ $location = get_field('google-map');
260
+
261
+ if( !empty($location) ):
262
+
263
+ ?>
264
+
265
+ <div class="acf-map">
266
+
267
+ <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
268
+
269
+ </div>
270
+
271
+ <?php endif; ?>
272
+
273
+ </p>
274
+
275
+ <!-- //google map -->
276
+
277
+ ```
278
+
279
+ ###外部化したjsファイルの読み込み
280
+
281
+ ```ここに言語を入力
282
+
283
+ <!-- ACF googlemap-api -->
284
+
285
+ <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
286
+
287
+ <?php wp_enqueue_script( 'googlemapapi', get_bloginfo( 'stylesheet_directory'). '/js/googlemapapi.js', array(), false, true ); ?>
288
+
289
+ <!-- //ACF googlemap-api -->
290
+
291
+ ```
292
+
293
+ ###外部化したjsファイル
294
+
295
+ ```ここに言語を入力
296
+
297
+ (function($) {
298
+
299
+
300
+
301
+ /*
302
+
303
+ * render_map
304
+
305
+ *
306
+
307
+ * This function will render a Google Map onto the selected jQuery element
308
+
309
+ *
310
+
311
+ * @type function
312
+
313
+ * @date 8/11/2013
314
+
315
+ * @since 4.3.0
316
+
317
+ *
318
+
319
+ * @param $el (jQuery element)
320
+
321
+ * @return n/a
322
+
323
+ */
324
+
325
+
326
+
327
+ function render_map( $el ) {
328
+
329
+
330
+
331
+ // var
332
+
333
+ var $markers = $el.find('.marker');
334
+
335
+
336
+
337
+ // vars
338
+
339
+ var args = {
340
+
341
+ zoom : 16,
342
+
343
+ center : new google.maps.LatLng(0, 0),
344
+
345
+ mapTypeId : google.maps.MapTypeId.ROADMAP
346
+
347
+ };
348
+
349
+
350
+
351
+ // create map
352
+
353
+ var map = new google.maps.Map( $el[0], args);
354
+
355
+
356
+
357
+ // add a markers reference
358
+
359
+ map.markers = [];
360
+
361
+
362
+
363
+ // add markers
364
+
365
+ $markers.each(function(){
366
+
367
+
368
+
369
+ add_marker( $(this), map );
370
+
371
+
372
+
373
+ });
374
+
375
+
376
+
377
+ // center map
378
+
379
+ center_map( map );
380
+
381
+
224
382
 
225
383
  }
226
384
 
227
385
 
228
386
 
229
- add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
230
-
231
- ```
232
-
233
-
234
-
235
- ###テンプレートファイルsingle-property.phpに実行した内容
236
-
237
- ```ここに言語を入力
238
-
239
- <!-- google map -->
240
-
241
- <p>
242
-
243
- <?php
244
-
245
- $location = get_field('google-map');
246
-
247
- if( !empty($location) ):
248
-
249
- ?>
250
-
251
- <div class="acf-map">
252
-
253
- <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
254
-
255
- </div>
256
-
257
- <?php endif; ?>
258
-
259
- </p>
260
-
261
- <!-- //google map -->
262
-
263
- ```
264
-
265
- ###外部化したjsファイルの読み込み
266
-
267
- ```ここに言語を入力
268
-
269
- <!-- ACF googlemap-api -->
270
-
271
- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
272
-
273
- <?php wp_enqueue_script( 'googlemapapi', get_bloginfo( 'stylesheet_directory'). '/js/googlemapapi.js', array(), false, true ); ?>
274
-
275
- <!-- //ACF googlemap-api -->
276
-
277
- ```
278
-
279
- ###外部化したjsファイル
280
-
281
- ```ここに言語を入力
282
-
283
- (function($) {
284
-
285
-
286
-
287
387
  /*
288
388
 
289
- * render_map
389
+ * add_marker
290
-
390
+
291
- *
391
+ *
292
-
392
+
293
- * This function will render a Google Map onto the selected jQuery element
393
+ * This function will add a marker to the selected Google Map
294
394
 
295
395
  *
296
396
 
@@ -302,7 +402,9 @@
302
402
 
303
403
  *
304
404
 
305
- * @param $el (jQuery element)
405
+ * @param $marker (jQuery element)
406
+
407
+ * @param map (Google Map object)
306
408
 
307
409
  * @return n/a
308
410
 
@@ -310,49 +412,117 @@
310
412
 
311
413
 
312
414
 
313
- function render_map( $el ) {
415
+ function add_marker( $marker, map ) {
314
416
 
315
417
 
316
418
 
317
419
  // var
318
420
 
421
+ var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
422
+
423
+
424
+
425
+ // create marker
426
+
319
- var $markers = $el.find('.marker');
427
+ var marker = new google.maps.Marker({
428
+
429
+ position : latlng,
430
+
431
+ map : map
432
+
433
+ });
434
+
435
+
436
+
437
+ // add to array
438
+
439
+ map.markers.push( marker );
440
+
441
+
442
+
443
+ // if marker contains HTML, add it to an infoWindow
444
+
445
+ if( $marker.html() )
446
+
447
+ {
448
+
449
+ // create info window
450
+
451
+ var infowindow = new google.maps.InfoWindow({
452
+
453
+ content : $marker.html()
454
+
455
+ });
456
+
457
+
458
+
459
+ // show info window when marker is clicked
460
+
461
+ google.maps.event.addListener(marker, 'click', function() {
462
+
463
+
464
+
465
+ infowindow.open( map, marker );
466
+
467
+
468
+
469
+ });
470
+
471
+ }
472
+
473
+
474
+
475
+ }
476
+
477
+
478
+
479
+ /*
480
+
481
+ * center_map
482
+
483
+ *
484
+
485
+ * This function will center the map, showing all markers attached to this map
486
+
487
+ *
488
+
489
+ * @type function
490
+
491
+ * @date 8/11/2013
492
+
493
+ * @since 4.3.0
494
+
495
+ *
496
+
497
+ * @param map (Google Map object)
498
+
499
+ * @return n/a
500
+
501
+ */
502
+
503
+
504
+
505
+ function center_map( map ) {
320
506
 
321
507
 
322
508
 
323
509
  // vars
324
510
 
325
- var args = {
326
-
327
- zoom : 16,
328
-
329
- center : new google.maps.LatLng(0, 0),
511
+ var bounds = new google.maps.LatLngBounds();
330
-
331
- mapTypeId : google.maps.MapTypeId.ROADMAP
512
+
332
-
333
- };
513
+
334
-
335
-
336
-
337
- // create map
514
+
338
-
339
- var map = new google.maps.Map( $el[0], args);
340
-
341
-
342
-
343
- // add a markers reference
515
+ // loop through all markers and create bounds
344
-
345
- map.markers = [];
516
+
346
-
347
-
348
-
349
- // add markers
350
-
351
- $markers.each(function(){
352
-
353
-
354
-
355
- add_marker( $(this), map );
517
+ $.each( map.markers, function( i, marker ){
518
+
519
+
520
+
521
+ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
522
+
523
+
524
+
525
+ bounds.extend( latlng );
356
526
 
357
527
 
358
528
 
@@ -360,9 +530,29 @@
360
530
 
361
531
 
362
532
 
533
+ // only 1 marker?
534
+
535
+ if( map.markers.length == 1 )
536
+
537
+ {
538
+
363
- // center map
539
+ // set center of map
540
+
364
-
541
+ map.setCenter( bounds.getCenter() );
542
+
365
- center_map( map );
543
+ map.setZoom( 16 );
544
+
545
+ }
546
+
547
+ else
548
+
549
+ {
550
+
551
+ // fit to bounds
552
+
553
+ map.fitBounds( bounds );
554
+
555
+ }
366
556
 
367
557
 
368
558
 
@@ -372,11 +562,11 @@
372
562
 
373
563
  /*
374
564
 
375
- * add_marker
565
+ * document ready
376
-
566
+
377
- *
567
+ *
378
-
568
+
379
- * This function will add a marker to the selected Google Map
569
+ * This function will render each map when the document is ready (page has loaded)
380
570
 
381
571
  *
382
572
 
@@ -384,13 +574,11 @@
384
574
 
385
575
  * @date 8/11/2013
386
576
 
387
- * @since 4.3.0
577
+ * @since 5.0.0
388
-
578
+
389
- *
579
+ *
390
-
391
- * @param $marker (jQuery element)
580
+
392
-
393
- * @param map (Google Map object)
581
+ * @param n/a
394
582
 
395
583
  * @return n/a
396
584
 
@@ -398,196 +586,22 @@
398
586
 
399
587
 
400
588
 
401
- function add_marker( $marker, map ) {
589
+ $(document).ready(function(){
402
-
403
-
404
-
405
- // var
590
+
406
-
407
- var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
591
+
408
-
409
-
410
-
592
+
411
- // create marker
593
+ $('.acf-map').each(function(){
412
-
413
- var marker = new google.maps.Marker({
594
+
414
-
595
+
596
+
415
- position : latlng,
597
+ render_map( $(this) );
416
-
417
- map : map
598
+
599
+
418
600
 
419
601
  });
420
602
 
421
603
 
422
604
 
423
- // add to array
424
-
425
- map.markers.push( marker );
426
-
427
-
428
-
429
- // if marker contains HTML, add it to an infoWindow
430
-
431
- if( $marker.html() )
432
-
433
- {
434
-
435
- // create info window
436
-
437
- var infowindow = new google.maps.InfoWindow({
438
-
439
- content : $marker.html()
440
-
441
- });
442
-
443
-
444
-
445
- // show info window when marker is clicked
446
-
447
- google.maps.event.addListener(marker, 'click', function() {
448
-
449
-
450
-
451
- infowindow.open( map, marker );
452
-
453
-
454
-
455
- });
456
-
457
- }
458
-
459
-
460
-
461
- }
462
-
463
-
464
-
465
- /*
466
-
467
- * center_map
468
-
469
- *
470
-
471
- * This function will center the map, showing all markers attached to this map
472
-
473
- *
474
-
475
- * @type function
476
-
477
- * @date 8/11/2013
478
-
479
- * @since 4.3.0
480
-
481
- *
482
-
483
- * @param map (Google Map object)
484
-
485
- * @return n/a
486
-
487
- */
488
-
489
-
490
-
491
- function center_map( map ) {
492
-
493
-
494
-
495
- // vars
496
-
497
- var bounds = new google.maps.LatLngBounds();
498
-
499
-
500
-
501
- // loop through all markers and create bounds
502
-
503
- $.each( map.markers, function( i, marker ){
504
-
505
-
506
-
507
- var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
508
-
509
-
510
-
511
- bounds.extend( latlng );
512
-
513
-
514
-
515
- });
516
-
517
-
518
-
519
- // only 1 marker?
520
-
521
- if( map.markers.length == 1 )
522
-
523
- {
524
-
525
- // set center of map
526
-
527
- map.setCenter( bounds.getCenter() );
528
-
529
- map.setZoom( 16 );
530
-
531
- }
532
-
533
- else
534
-
535
- {
536
-
537
- // fit to bounds
538
-
539
- map.fitBounds( bounds );
540
-
541
- }
542
-
543
-
544
-
545
- }
546
-
547
-
548
-
549
- /*
550
-
551
- * document ready
552
-
553
- *
554
-
555
- * This function will render each map when the document is ready (page has loaded)
556
-
557
- *
558
-
559
- * @type function
560
-
561
- * @date 8/11/2013
562
-
563
- * @since 5.0.0
564
-
565
- *
566
-
567
- * @param n/a
568
-
569
- * @return n/a
570
-
571
- */
572
-
573
-
574
-
575
- $(document).ready(function(){
576
-
577
-
578
-
579
- $('.acf-map').each(function(){
580
-
581
-
582
-
583
- render_map( $(this) );
584
-
585
-
586
-
587
- });
588
-
589
-
590
-
591
605
  });
592
606
 
593
607
 

3

追記

2016/08/10 10:29

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,24 @@
56
56
 
57
57
 
58
58
 
59
+ その後ご教授頂いた記事を参考にAPIを再取得しソースコードを追記したのですが、
60
+
61
+ 下記のような内容のエラーが出てしまいました。
62
+
63
+ ```ここに言語を入力
64
+
65
+ js?key=AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI:34
66
+
67
+ Google Maps API error: RefererNotAllowedMapError
68
+
69
+ https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
70
+
71
+ Your site URL to be authorized: http://dai-ichi.net/property/detail007/
72
+
73
+ ```
74
+
75
+ こちらは
76
+
59
77
  ###fuctions.phpに実行したカスタム投稿タイプの内容
60
78
 
61
79
  ```ここに言語を入力

2

追記

2016/08/10 08:06

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,24 @@
38
38
 
39
39
 
40
40
 
41
+ ご指摘いただきデベロッパーツールで確認したところ以下エラーが出ました。
42
+
43
+ ```ここに言語を入力
44
+
45
+ Google Maps API warning: NoApiKeys
46
+
47
+ https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
48
+
49
+ Google Maps API warning: SensorNotRequired
50
+
51
+ https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
52
+
53
+ ```
54
+
55
+ と、googlemapAPIのエラーが出ているようでした。
56
+
57
+
58
+
41
59
  ###fuctions.phpに実行したカスタム投稿タイプの内容
42
60
 
43
61
  ```ここに言語を入力

1

追記

2016/08/10 04:50

投稿

ho-ri
ho-ri

スコア11

test CHANGED
File without changes
test CHANGED
@@ -591,3 +591,7 @@
591
591
  WordPressバージョン 4.4.4
592
592
 
593
593
  Advanced Custom Fieldsバージョン 4.4.7
594
+
595
+
596
+
597
+ 不足している情報などがあればご指摘ください。