JavaScript Geolocation モーダルウィンドウでAPIの利用が許可されず困っています

Question

前提

JavaScriptを使用し、GeolocationとGoogle maps APIを使用し、現在地から近い店舗を地図に出すことに成功して思い通りの挙動になったのですが、テスト環境はただのhtmlファイル一枚でChromeに表示で確認しながら実装しました。

これをWordPressに移設しようとしており、親画面からボタンを押されたら小画面（モーダルウインドウ）に地図を表示させようとしています。（モーダルウィンドウ自体は開きます）

htmlでは現在地をこのファイルが次の許可を求めてきて許可するボタンが出ていたのですが、モーダルウインドウになると許可を求めてきません。

geolocationのエラーは1が返ってきて、許可されていませんとなり現在地の取得が出来ません。

機能的に小画面に出したいです。

何か対処法はありますでしょうか？
よろしくお願いします。

ー－－－－－－－－－－－－－－－－
2022/08/17更新
子画面に出す方法をやめてみました。ところが画面遷移でも同じく現在位置を求めてきませんでした。
あらためまして、jsファイルの中身全部コピーして貼り付けます。

実現したいこと

WordPressの親画面にボタンを設置し、ボタンをクリックしたらモーダルウィンドウを表示しそのモーダルウィンドウ内に地図を表示させたい。

下記は自分で実現できると思いますが、まずはGeolocationのエラーを解決したいです。

• ブラウザを新規にオープンさせて地図を表示させたくない
• モーダルウィンドウに地図を表示させて、現在地から近い店舗を表示
• 店舗を「選択」を押したらモーダルウィンドウを閉じる
• 選択された店舗の店舗名や住所を親画面に反映

発生している問題・エラーメッセージ

1＝Geolocation APIの利用が許可されない

該当のソースコード

if (location.pathname === '/satei/satei_cycle'){
      //ユーザーの現在の位置情報を取得
      navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

      /***** ユーザーの現在の位置情報を取得 *****/
      function successCallback(position) {
         
         var requestAjax = function(endpoint, callback) {
         var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
            if (this.readyState==4 && this.status==200) {
               callback(this.response);
            }
            };
            xhr.responseType = 'json';
            xhr.open('GET',endpoint,true);
            xhr.send();
         };

         // 現在地の緯度
         var latitude = position.coords.latitude;
         // 現在地の経度
         var longitude = position.coords.longitude;

         var userMap = new google.maps.LatLng(latitude, longitude);

         var apiKey = 'あああ';

         var opts = {
            zoom: 11,
            center: new google.maps.LatLng(latitude, longitude)
         };

         var requestURL = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false';
         requestURL += '&latlng=' + latitude + ',' + longitude;
         requestURL += '&key=' + apiKey;

         // 現在地の緯度経度
         var origin1 = {lat: latitude, lng: longitude};
         
         // Geocoderのオブジェクト
         var geocoder = new google.maps.Geocoder;

         // DistanceMatrixServiceのオブジェクト
         var service = new google.maps.DistanceMatrixService;

         // 店舗の経度緯度の配列（この配列と下記の連想配列の順番は同じにする）
         var org = new Array();
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx)); //〇〇店
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx));  //〇〇店
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxx)); //〇〇店
         
         // 連想配列 店舗名と住所、3つ目に目的地までの距離を最終的に追加
         var shopList = [
            {name:'〇〇店', add:'神奈川県xxxxx', lat:35.xxxx, lng:139.xxxx },
            {name:'〇〇店',  add:'神奈川県xxxxxx', lat:35.xxxx, lng:139.xxxxx},
            {name:'〇〇店', add:'神奈川県xxxx, lat:35.xxx, lng: 139.xxxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxx, lng: 139.xxx}
         ];

         // DistanceMatrixの実行
         service.getDistanceMatrix({
            origins: [origin1], 
            // 出発地のLatLngオブジェクトの配列
            destinations: org, 
            //目的地のLatLngオブジェクトの配列
            travelMode: 'DRIVING',
            //DRIVING=自動車,BICYCLING=自転車,TRANSIT=電車,WALKING=徒歩
            unitSystem: google.maps.UnitSystem.METRIC,
            //距離を表示する際に使用される優先単位系
            //METRIC=の距離をメートル法の単位で表す。
            avoidHighways: false,
            //true の場合、可能な限り高速道路を避ける（省略可）
            avoidTolls: false
            //true の場合、可能な限り有料道路を避ける（省略可
         },
         function(response, status) {
            if (status !== 'OK') {
               alert('Error was: ' + status);
            } else {
               var originList = response.originAddresses;
               var outputDiv = document.getElementById('output');
               outputDiv.innerHTML = '';

               for (var i = 0; i < originList.length; i++) {
                  var results = response.rows[i].elements;

                  // Geocoderの呼び出し
                  geocoder.geocode

                  for (var j = 0; j < results.length; j++) {
                     // xxxxx　数値　フォーマットされていないもの
                     var distance = results[j].distance.value;
                     // xx.x km フォーマットされたもの
                     var kyori = results[j].distance.text;
                     // 距離（単位メートル）
                     outputDiv.innerHTML += results[j].distance.text;

                     shopList[j].code = distance;
                     var n = shopList[j].code;

                     
                  }
               }

               // 繰り返し処理終わった後で、shopList 距離順にソートかける
               shopList.sort((a, b)=> {
                  if(a.code < b.code) return -1;
                  else if(a.code > b.code) return 1;
                  return 0;
               })
               console.log(shopList);

               var map = new google.maps.Map(document.getElementById("map2"), opts);

               // 2番目までの店舗にピンを立てたい
               // 1番近い店舗
               var m_latlng1 = new google.maps.LatLng(shopList[0].lat, shopList[0].lng);
               var marker1 = new google.maps.Marker({
                  position: m_latlng1,
                  map: map,
                  title: shopList[0].name,
                  icon:{
                     url: 'pin.png'
                  }

               });

               // 2番目に近い店舗
               var m_latlng2 = new google.maps.LatLng(shopList[1].lat, shopList[1].lng);
               var marker2 = new google.maps.Marker({
                  position: m_latlng2,
                  map: map,
                  title: shopList[1].name,
                  icon:{
                     url: 'pin.png'
                  }
               });

               // 3番目に近い店舗
               var m_latlng3 = new google.maps.LatLng(shopList[2].lat, shopList[2].lng);
               var marker3 = new google.maps.Marker({
                  position: m_latlng3,
                  map: map,
                  title: shopList[2].name,
                  icon:{
                     url: 'pin.png'
                  }
               });

               // ユーザーの自宅にもピンを立てる
               var marker4 = new google.maps.Marker({
                  position: userMap,
                  map: map,
                  title: '現在地',
                  icon:{
                     url: 'user-pin.png'
                  }
               });

               // 並び替えが終わったshopListを元の画面に返す
            }
      });


         requestAjax(requestURL, function(response){
         
            if (response.error_message) {
               alert("住所を取得することが出来ませんでした");
               console.log(response.error_message);
            } else {
            var formattedAddress = response.results[0]['formatted_address'];
            // 住所は「日本、〒100-0005 東京都千代田区丸の内一丁目」の形式
            var data = formattedAddress.split(' ');
            if (data[1]) {
               // id=addressに住所を設定する
               document.getElementById('address').innerHTML = data[1];
            }
            }
         });
      }

      /***** 位置情報が取得できない場合 *****/
      function errorCallback(error) {
      var err_msg = "";
      switch(error.code)
      {
         case 1:
            err_msg = "位置情報の利用が許可されていません";
            break;
         case 2:
            err_msg = "デバイスの位置が判定できません";
            break;
         case 3:
            err_msg = "タイムアウトしました";
            break;
      }
      alert(err_msg);
      }
   };

functions.php

<?php
    if ($isSelectGpsOver) {
    ?>
        <form name="select-shop-gps" method="post" action="/satei/satei_cycle">
            <div class="panel-heading">
                <h2 class="obi">現住所から選択</h2>
            </div>
            <div id="map2" style="width:620px; height:400px"></div>
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=APIキーcallback=initMap">
            </script>
        </form>
    <?php
    }
    ?>

試したこと

GPSから店舗を検索するボタンを押されたら画面遷移するように修正

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[tuki43]

モーダルウィンドウをやめて、onclickでのwindow.openでも、やはり同じ結果でした。子画面ではgeolocationは使えないのでしょうか・・・・？

[tabuu]

WordPressに組み込まれているJQuery使っているのでしたらエラーでていないですか？

[tuki43]

そもそもWordPressが阻害していますか？
子ページではなく親ページ自体に埋めてHTMLうめて、JSコードを読みこませてみましたがやはり同じ結果でした。

functions.phpの冒頭で
wp_enqueue_script('gps', get_stylesheet_directory_uri() . '/js/gps.js');
としています。

jsファイル内では jQueryの文言はありません。jQueryは使っていないと思うのですが…

あとはfunctions.php内にHTMLを記載して、functions内で画面遷移するような制御をしております。

[tabuu]

提示されているJavaScriptのコードに下記があるのでJQuery使っているかと思いました。
$(function () {
...
});

GPSの位置情報取得でエラーになっているのでしょうか？
問題の切り分けのためにGoogleMap関係のコードは削除して最小限のコードで試してみていただけないでしょうか。
(必要であればバックアップをとって)

[tuki43]

初心者で申し訳ございません。
$(function () {

これを書くとjQueruとなってしまうのでしょうか？

ネット上にあるコードを切り貼りして自分なりにアレンジして作成したものとなります。

[tuki43]

今のjsファイルでは
$(function (){
と書かれているものはありません。
そして現在位置の許可を求めてきません(泣

[tuki43]

現在のjsファイルとphpで再掲致しました。APIキーや店舗名などは伏せております。
よろしくお願い致します。

[tabuu]

回答欄のコードをお試しください。

また「現在位置を求めてきませんでした」とありますが、ブラウザのセキュリティ設定で
該当のサイトにおける位置情報の取得をブロックしていないですか？
セキュリティ対策ソフトなどもインストールしていればご確認ください。

[tuki43]

回答欄のコード試しました。

Uncaught ReferenceError: position is not defined
at gps.js?ver=1660778122:5:13
(anonymous) @ gps.js?ver=1660778122:5

と出ております

つまり引数のpositionがどこかで定義する必要があるのでしょうか？

htmlではposition定義せず、引数にposition入れるだけで使えていたのが謎になります。。

[tabuu]

getCurrentPositionがerrorとなる(1＝Geolocation APIの利用が許可されない)
という課題ですので、
gps.jsとか一切外してgetCurrentPositionの結果のみをご確認ください。

[tuki43]

WordPressに導入する前に事前に実装した1枚のhtmlでは成功しているのです。
同じブラウザです。
同じブラウザなのに、こちらの1枚のhtmlでは許可を求めてくるのでしょうか？
同じブラウザなのに、WordPressにすると許可を求めてこないのでしょうか？（親画面・子画面関係なく）

1枚のhtmlではpositionは宣言していないのにsuccessCallback(position)とするだけで経度緯度が取得されます。そのあとのGoogleMapsAPIの処理、ピンを立てるなど成功しております。

それがWordPressにjsファイルとphpファイルに分けて実装するとsuccessCallback()が呼ばれず、errorCallbackが必ず呼ばれます。

WordPressのほう、js内でnavigator.geolocationをすると使える環境と返ってきますので、ブラウザは問題ないかと思います。

positionはUncaught ReferenceError: position is not definedとなりsuccessCallbackが呼ばれず、errorCallbackが呼ばれている模様。

訳が分かりません‥‥

[tuki43]

successCallbackの中身を全部コメントアウトしてもやっぱりエラーコールバックが呼ばれます。
意味不明です。
やはりpositionの中身がないから？？？

[tabuu]

>WordPressに導入する前に事前に実装した1枚のhtmlでは成功しているのです。
>同じブラウザです。

これは今までのやり取りで理解しています。

>同じブラウザなのに、こちらの1枚のhtmlでは許可を求めてくるのでしょうか？
>同じブラウザなのに、WordPressにすると許可を求めてこないのでしょうか？（親画面・子画面関係なく）

これを検証するために確認用のコードを提示させていただきました。

[tuki43]

仕様変更でGPS表示で地図を出すのをやめました。。。
お付き合いいただきありがとうございました。

Answer 1

コードを投稿したかったので回答欄に書きました。
以下のコードそのものではconsoleに何が表示されますか？もしくは何も表示されないですか？

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
  console.log(position);
}

function errorCallback(error) {
  console.log(error);
}

Comments

[tuki43]

Uncaught ReferenceError: position is not defined
at gps.js?ver=1660778122:5:13
(anonymous) @ gps.js?ver=1660778122:5

と出るだけで、そもそもpositionが認識されていないようでした。

処理的にここまで頑張る必要はないので、もう地図を出すのをやめました。。。
ありがとうございました。

Answer 2

Dialog要素のshowModal関数でモーダルウインドウを実現しているならchromeが許可していないのかもしれません。
疑似的にモーダルにしているなら他のDIV要素と変わらないので別の原因があるのではないでしょうか。

Comments

[tuki43]

ご回答ありがとうございます。HTML部分はdiv要素でした。
div要素であれば表示されるはずなのでしょうか？何かcssの影響で許可されないのでしょうか？
Dialog要素のshowModal関数は使ったことがなく、調べたところ対応ブラウザが少ないようでした。

あらためましてPHPのHTML部分とcssを掲載いたしました。

[tuki43]

if( navigator.geolocation )では
trueが返ってきました。つまり、取得できるはずなのでcssかhtmlの実装がおかしいということでしょうか？

[tuki43]

何度もすみません。
successCallback()の中身を緯度・経度取得以外はすべてコメントアウトしてもやはりエラーコールバックが呼ばれてしまいます...