googlemapに複数ピンを立てて固定ページで表示したい

Question

前提・実現したいこと

advanced custom fieldsを使って投稿ページにgooglemapを追加しています。
複数の投稿からgooglemapに入力した住所を一つの地図にまとめてピンを立てて
固定ページで表示したいと思っています。
こんな感じが理想です。
https://suumo.jp/edit/chizu/chintai/

公式の通りに設定しまして
https://www.advancedcustomfields.com/resources/google-map/
投稿ページにgooglemapを表示することはできたのですが、固定ページにどうしても
表示されません。
上記URLのRender multiple markers onto a mapのところを使えないかと格闘しています…
やり方をご存じの方がいましたらぜひ教えていただけると助かります。
・field LabelはMap
・field nameはmap
・field typeはGoogle Map
です。

header.php

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

page.php

<!-- 	google -->
	<?php if( have_rows('map') ): ?>
    <div class="acf-map" data-zoom="16">
        <?php while ( have_rows('map') ) : the_row(); 

            // Load sub field values.
            $location = get_sub_field('location');
            $title = get_sub_field('description');
            $description = get_sub_field('description');
            ?>
            <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>">
                <h3><?php echo esc_html( $title ); ?></h3>
                <p><em><?php echo esc_html( $location['address'] ); ?></em></p>
                <p><?php echo esc_html( $description ); ?></p>
            </div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>

functions.php

//acf-map
function my_scripts_method() {
	wp_enqueue_script(
		'custom_script',
		get_template_directory_uri() . '/js/acf-map.js',
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

//googlemap 
// Method 1: Filter.
function my_acf_google_map_api( $api ){
    $api['key'] = 'googleキー';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

// Method 2: Setting.
function my_acf_init() {
    acf_update_setting('google_api_key', 'googleキー');
}
add_action('acf/init', 'my_acf_init');

acf-map.js

(function($) {

  /**
   * initMap
   *
   * Renders a Google Map onto the selected jQuery element
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   jQuery $el The jQuery element.
   * @return  object The map instance.
   */
  function initMap( $el ) {
  
      // Find marker elements within map.
      var $markers = $el.find('.marker');
  
      // Create gerenic map.
      var mapArgs = {
          zoom        : $el.data('zoom') || 16,
          mapTypeId   : google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map( $el[0], mapArgs );
  
      // Add markers.
      map.markers = [];
      $markers.each(function(){
          initMarker( $(this), map );
      });
  
      // Center map based on markers.
      centerMap( map );
  
      // Return map instance.
      return map;
  }
  
  /**
   * initMarker
   *
   * Creates a marker for the given jQuery element and map.
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   jQuery $el The jQuery element.
   * @param   object The map instance.
   * @return  object The marker instance.
   */
  function initMarker( $marker, map ) {
  
      // Get position from marker.
      var lat = $marker.data('lat');
      var lng = $marker.data('lng');
      var latLng = {
          lat: parseFloat( lat ),
          lng: parseFloat( lng )
      };
  
      // Create marker instance.
      var marker = new google.maps.Marker({
          position : latLng,
          map: map
      });
  
      // Append to reference for later use.
      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 );
          });
      }
  }
  
  /**
   * centerMap
   *
   * Centers the map showing all markers in view.
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   object The map instance.
   * @return  void
   */
  function centerMap( map ) {
  
      // Create map boundaries from all map markers.
      var bounds = new google.maps.LatLngBounds();
      map.markers.forEach(function( marker ){
          bounds.extend({
              lat: marker.position.lat(),
              lng: marker.position.lng()
          });
      });
  
      // Case: Single marker.
      if( map.markers.length == 1 ){
          map.setCenter( bounds.getCenter() );
  
      // Case: Multiple markers.
      } else{
          map.fitBounds( bounds );
      }
  }
  
  // Render maps on page load.
  $(document).ready(function(){
      $('.acf-map').each(function(){
          var map = initMap( $(this) );
      });
  });
  
  })(jQuery);
	

試したこと

( have_rows('map') ):の部分ですが、公式通りの ( have_rows('locations') ) :
だと投稿画面でも何も表示されないので変更しています。mapにすると灰色の四角だけは出ます…固定ページでは相変わらず何も表示されませんが、、

Comments

[退会済みユーザー]

Google Map API利用するときのAPIキーは適切に与えていますか？ Google Mapに引き渡す値がどうなっているか、デベロッパーツールのデバッガーなどを駆使して確認してみてください。

[itsuki2020]

コメントありがとうございます！
お返事遅くなってしまい、申し訳ありません。apiは登録し、投稿画面では正しく表示されます。

Answer 1

page.php
に書いているコードの意味、わかりますか？

参考記事での「have_rows('locations')」でループを回しているのは、
'locations'っていうフィールドに位置情報（lat,lngほか）があるからなので、
違うフィールドに持っているならそれをhave_rows()の引数にしないといけないのではないかと。
そして、$location = get_sub_field('location');も見直しが必要でしょうし。

Comments

[itsuki2020]

すみません、acfでhave_rowsを使おうと思うと課金が必要みたいでした。方法があるのかと思うのですが、初心者の私には難しかったので…別途プラグインを入れて解決しました。ありがとうございました。