質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 989

score 2

前提・実現したいこと

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にすると灰色の四角だけは出ます…固定ページでは相変わらず何も表示されませんが、、

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2021/01/18 10:32 編集

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

    キャンセル

  • itsuki2020

    2021/01/28 20:26

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/20 16:51

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る