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

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

新規登録して質問してみよう
ただいま回答率
87.20%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

itsuki2020
itsuki2020

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

1678閲覧

投稿2021/01/17 07:49

編集2021/01/17 07:51

前提・実現したいこと

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/01/18 01:36 編集

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

2021/01/28 11:26

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。