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

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

ただいまの
回答率

90.49%

  • JavaScript

    16930questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7401questions

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

  • Google API

    540questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

現在位置と「投稿」内のカスタムフィールドに登録した場所を同時にgooglemap上に表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,573

yukko

score 15

wordpress内で、現在位置と「投稿」内のカスタムフィールド「googlemap」に登録した場所を同時にgooglemap上に表示したいのですが、紐付けができなくて悩んでいます。

下記のようなイメージです

イメージとしてはこういうものを作りたいと思っております

http://waox.main.jp/wordpressmap/?page_id=2
上記を参考にした場合、現在位置以外の表示の仕方が投稿ではありませんでした。

https://bizvektor.com/wordpress-event/2014_wordfes_geolocation_api/
上記が一番やりたいことに近かったのですが、「位置情報のパラメーターを受け取って近くのお城順に並べる」の箇所で「移動先の固定ページのテンプレートファイル(PHP)に記述」の箇所でPHPに記述しても上手くいきませんでした。(コメントアウトや記述を見る限り、ほとんどjavascriptのような気がするのですが、そもそもphpに記述して上手くいくものなのでしょうか?)

プラグインの「Geo Mashup」はかなりイメージに近く、投稿内の記事をまとめてgooglemap上に表示させられたのですが、現在地を取得した場合、どう紐付けしていいのか、というところで詰まってしまいました。(Geo Mashupを使う場合、投稿する側の人が二回住所を打ち込まないといけない、というのもちょっとややこしい点です)

記事に含まれている経度、緯度の情報をまとめてMapに表示→ユーザーに現在地を取得のアクションをしてもらう→Map上に現在地も表示される。
ということができれば、何でもいいのですが、それらしいプラグインもなく、困っております。

カスタムフィールドの情報を参照できたら、一番いいのですが、結果的にできれば二度手間でも構いません。

・上記の自分が参考したURLから何か自分が解釈を間違えてること
・Geo Mashupと現在位置を紐付ける手がかり
・すぐにできちゃうプラグイン

なんでも構いません。何か手がかりがありましたらお願いします。

追記
下記のURLからなんとかできないかと思い、現在作成中です。
http://make.mapmap.biz/api/559/

上記サイトではトップページなのですが、今手がけている案件では「カテゴリーページ」に導入したいので、「category-スラッグ.php」に以下のように書き込みました。

<div id="map map_canvas" class="acf-map" style="width: 400px; height: 620px;"></div>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function() {
        var mapdiv = document.getElementById( 'map' );
        var myOptions = {
            zoom: 15,
            center: new google.maps.LatLng(35.68971, 139.69168),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        };
        var map = new google.maps.Map( mapdiv, myOptions );

        var marker = [];
        var infowindow = [];

<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>

<?php while (have_posts()) : the_post(); ?>

          marker[<?php echo $m++; ?>] = new google.maps.Marker({
            icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png',
            position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ),
            map: map,
            title: '<?php the_title(); ?>'
        });
        infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({
            content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
            size: new google.maps.Size( 50, 30 )
        });
        google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() {
            infowindow[<?php echo $i2++; ?>].open( map, marker[<?php echo $m2++; ?>] );
        });
<?php endwhile; // End the loop. Whew. ?>
        var markerCluster = new MarkerClusterer( map, marker );
    });

</script>

こう書き込んだところ、初めはgooglemapが表示されなかったので、

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


と付け足したら、mapは表示されました。

ただ、mapの中心が東京駅

center: new google.maps.LatLng(35.68971, 139.69168),


にならず、各記事にリンクするはずのピンも表示されません。

ソースを見たところ、javascriptから各記事のデータは読み込まれています。

このマップの中心地に現在地を読み込んで代入すれば、目的は果たせると思うのですが、根本的に何か間違っていると思うのでご教授願います。

追記2

.acf-mapがそもそも個別ページのカスタムフィールドのmapを描画するjavascriptのクラスだったので、こっちのmapが表示されていただけでした。
ただ、.acf-mapを外すと、mapが表示されない(エラーメッセージもなく真っ白です)ので、そもそもこのmap自体が描画されてないようです。
質問内容とずれてきたので、調べてわからなければ、別途質問します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2016/05/16 12:16

    「PHPに記述しても上手くいきませんでした。」とありますが、具体的にはどのようにうまくいきませんでしたか? 出力されたエラーなどをご提示ください。

    キャンセル

  • yukko

    2016/05/16 14:21

    エラーというよりは、コメントアウト以降がそのまま文字列として出力されてしまう状態です。 phpファイルにjavascriptのコメントアウトの記述をすれば、まぁそりゃ確かにそうなんですが…。 ではphpのどこに記述するのか?という状態です。

    キャンセル

  • Lhankor_Mhy

    2016/05/16 15:58

    ? よく分からないのですが、「位置情報のパラメーターを受け取って近くのお城順に並べる」のパラグラフに書いてあるのはjavascriptではなくPHPコードだと思いますよ。もう一度その記事を読まれた方がいいのでは。

    キャンセル

  • yukko

    2016/05/16 22:25

    そうなんですか…。PHPのどこに記述してもコードがただの文字列としてそのまま出てしまい、何度も記事を読み直し、「固定ページのテンプレート」のループ内に記述、外部javascriptとして読み込む、を試したのですが、全く動作しませんでした。どうも私の知識不足でできないみたいです。こちらの方法は諦めようと思います。

    キャンセル

回答 2

checkベストアンサー

+1

「移動先の固定ページのテンプレートファイル(PHP)に記述」の箇所でPHPに記述しても上手くいきませんでした。

記述の仕方にもよります。記事が Geo Mashup を想定していればそのままの記述で目的を果たせますが、そうで無い様なので難しいと思います。


(コメントアウトや記述を見る限り、ほとんどjavascriptのような気がするのですが、そもそもphpに記述して上手くいくものなのでしょうか?)

Google Maps JavaScript API を利用するため、地図を表示し、マーカーを置く部分はすべて JavaScript で記述されます。PHPで書いているところはDB内の位置情報を JavaScript に埋め込むためのものです。
PHPはサーバ上で、JavaScript はブラウザ上で動くため、PHPの変数を渡すに埋め込む方法を採っているという感じでしょうか。(わかりにくいですかね)


カスタムフィールドの情報を参照できたら、一番いいのですが

Geo Mashup がどのようにデータを扱っているかがわかりませんが、投稿・固定ページでカスタムフィールドが入っているか確認し、入っているなら get_post_meta() で取得できます。

【カスタムフィールドの使い方 - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/カスタムフィールドの使い方

【関数リファレンス/get post meta - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/関数リファレンス/get_post_meta


・Geo Mashupと現在位置を紐付ける手がかり 

公式リファレンスによると map ロード時に JavaScript を挟めるようです。「custom-googlev3.js」をプラグインディレクトリに入れれば実行時に読んでくれるみたいです。

【GoogleMapにWordPressの記事をプロットする方法 | Geo Mashup - wald-grun.biz】
http://wald-grun.biz/web/wp/5275/

custom-googlev3.jsという名前で保存して、/wp-content/plugins/geo-mashup-customに放り込めばOKです。

下記は「多分こんな感じで書く」というコードです。(検証環境がこちらにないため未検証です)

GeoMashup.addAction( 'loadedMap', function ( properties, mxn ) {
    if ( !navigator.geolocation ) { return; }
    navigator.geolocation.getCurrentPosition( success, ( function () {} ) );
    function success( position ) {
        var map = mxn.getMap();
        var latlng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
        var marker = new google.maps.Marker( {
              position: latlng
            , map: map
            , title: '現在地'
            , icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png'
        } );
        map.setCenter( latlng );
    }
} );

【Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/reference#Map

【Javascript API ・ cyberhobo/wordpress-geo-mashup Wiki ・ GitHub】
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Javascript-API

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/16 14:23

    回答ありがとうございます。
    できそうなものから試してみて、成功したら詳しく記述し、ベストアンサーにさせていださきます。
    大分手がかりが見えてきました。

    キャンセル

  • 2016/05/18 16:14

    追記文を見たところ、とりあえずひとつ指摘させていただきます。
    id="map map_canvas" という記法はありません。IDは1つのみ指定できます。

    キャンセル

  • 2016/05/19 18:16

    ケアレスミスですね;ご指摘ありがとうございます。
    なんとか解決したので、自己解決欄に記載します。

    キャンセル

0

googlemapが描画されませんの質問から発展して、なんとか目的は果たせたのでご報告します。

下記を「category-スラッグ.php」に記述しました。

.map-embed{
    max-width: 100% ;
    height: 0 ;
    margin: 0 ;
    padding: 0 0 56.25% ;
    overflow: hidden ;
    position: relative ;
    top: 0 ;
    left: 0 ;
}

.map-embed > div
{
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    margin: 0 ;
    padding: 0 ;
}

.map-embed img{    max-width: none ;}
<div class="map-embed">
    <div id="map-canvas"></div>
</div>
<script>
// ユーザーの端末がGeoLocation APIに対応しているかの判定

// 対応している場合
if( navigator.geolocation )
{
    // 現在地を取得
    navigator.geolocation.getCurrentPosition(

        // [第1引数] 取得に成功した場合の関数
        function( position )
        {
            // 取得したデータの整理
            var data = position.coords ;

            // データの整理
            var lat = data.latitude ;
            var lng = data.longitude ;
            var alt = data.altitude ;
            var accLatlng = data.accuracy ;
            var accAlt = data.altitudeAccuracy ;
            var heading = data.heading ;            //0=北,90=東,180=南,270=西
            var speed = data.speed ;

            var canvas = document.getElementById( 'map-canvas' ) ;    
            // 位置情報
            var latlng = new google.maps.LatLng( lat , lng ) ;

            // Google Mapsに書き出し
            var mapOptions = {
                zoom: 17 ,                // ズーム値
                center: latlng ,        // 中心座標 [latlng]
            };

var map = new google.maps.Map( canvas , mapOptions ) ;    
var markers = [] ;
var infowindows = [];


<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>


<?php while (have_posts()) : the_post(); ?>

         markers[<?php echo $m++; ?>] = new google.maps.Marker({
            icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png',
            position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ),
            map: map,
            title: '<?php the_title(); ?>'
        });
        infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({
            content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
            maxWidth: 250 ,
        });
        google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() {
            infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] );
      });
<?php endwhile; // End the loop. Whew. ?>
},

        // [第2引数] 取得に失敗した場合の関数
        function( error )
        {
            // エラーコード(error.code)の番号
            // 0:UNKNOWN_ERROR                原因不明のエラー
            // 1:PERMISSION_DENIED            利用者が位置情報の取得を許可しなかった
            // 2:POSITION_UNAVAILABLE        電波状況などで位置情報が取得できなかった
            // 3:TIMEOUT                    位置情報の取得に時間がかかり過ぎた…

            // エラー番号に対応したメッセージ
            var errorInfo = [
                "原因不明のエラーが発生しました…。東京駅を中心に表示します。" ,
                "位置情報の取得が許可されませんでした…。東京駅を中心に表示します。" ,
                "電波状況などで位置情報が取得できませんでした…。東京駅を中心に表示します。" ,
                "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。東京駅を中心に表示します。"
            ] ;

            // エラー番号
            var errorNo = error.code ;

            // エラーメッセージ
            var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;

            // アラート表示
            alert( errorMessage ) ;

var canvas = document.getElementById( 'map-canvas' ) ;

var latlng = new google.maps.LatLng( 35.681298 , 139.766247 );

var mapOptions = {
    zoom: 17 ,                // ズーム値
    center: latlng ,        // 中心座標 [latlng]
};

var map = new google.maps.Map( canvas , mapOptions ) ;
var markers = [] ;
var infowindows = [];


<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>


<?php while (have_posts()) : the_post(); ?>

         markers[<?php echo $m++; ?>] = new google.maps.Marker({
            icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png',
            position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ),
            map: map,
            title: '<?php the_title(); ?>'
        });
        infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({
            content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
            maxWidth: 250 ,
        });
        google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() {
            infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] );
      });
<?php endwhile; // End the loop. Whew. ?>

        } ,

        // [第3引数] オプション
        {
            "enableHighAccuracy": false,
            "timeout": 8000,
            "maximumAge": 2000,
        }

    ) ;
}

// 対応していない場合
else
{
    // エラーメッセージ
    var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。東京駅を中心に表示します。" ;

    // アラート表示
    alert( errorMessage ) ;

var canvas = document.getElementById( 'map-canvas' ) ;

var latlng = new google.maps.LatLng( 35.681298 , 139.766247 );

var mapOptions = {
    zoom: 17 ,                // ズーム値
    center: latlng ,        // 中心座標 [latlng]
};

var map = new google.maps.Map( canvas , mapOptions ) ;
var markers = [] ;
var infowindows = [];


<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>


<?php while (have_posts()) : the_post(); ?>

         markers[<?php echo $m++; ?>] = new google.maps.Marker({
            icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png',
            position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ),
            map: map,
            title: '<?php the_title(); ?>'
        });
        infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({
            content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
            maxWidth: 250 ,
        });
        google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() {
            infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] );
      });
<?php endwhile; // End the loop. Whew. ?>

}
</script>


javascriptの箇所がスマートではありませんが、これで一応動作しました。
本来なら現在地にもピンを立てたいのですが、個別記事のピンと競合してしまうので、それは別途解決方法を調べていきます。

ご回答、ご指摘していただいた方々、ありがとうございました。

参照URL:https://syncer.jp/how-to-use-geolocation-api

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    16930questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7401questions

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

  • Google API

    540questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。