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

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

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

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

WordPress

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

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

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

Google マップ

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

解決済

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

tuki43
tuki43

総合スコア12

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

WordPress

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

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

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

Google マップ

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

2回答

0リアクション

1クリップ

402閲覧

投稿2022/08/14 12:47

編集2022/08/17 08:23

前提

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

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

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

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

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

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

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

実現したいこと

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

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

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

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

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

該当のソースコード

JSファイル

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); } };

PHP

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/ツールのバージョンなど)

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

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

tuki43

2022/08/15 11:28

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

2022/08/17 02:42

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

2022/08/17 05:53

そもそもWordPressが阻害していますか? 子ページではなく親ページ自体に埋めてHTMLうめて、JSコードを読みこませてみましたがやはり同じ結果でした。 functions.phpの冒頭で wp_enqueue_script('gps', get_stylesheet_directory_uri() . '/js/gps.js'); としています。 jsファイル内では jQueryの文言はありません。jQueryは使っていないと思うのですが… あとはfunctions.php内にHTMLを記載して、functions内で画面遷移するような制御をしております。
tabuu

2022/08/17 07:28

提示されているJavaScriptのコードに下記があるのでJQuery使っているかと思いました。 $(function () { ... }); GPSの位置情報取得でエラーになっているのでしょうか? 問題の切り分けのためにGoogleMap関係のコードは削除して最小限のコードで試してみていただけないでしょうか。 (必要であればバックアップをとって)
tuki43

2022/08/17 08:09

初心者で申し訳ございません。 $(function () { これを書くとjQueruとなってしまうのでしょうか? ネット上にあるコードを切り貼りして自分なりにアレンジして作成したものとなります。
tuki43

2022/08/17 08:10

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

2022/08/17 08:24

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

2022/08/17 23:18

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

2022/08/18 00:02

回答欄のコード試しました。 Uncaught ReferenceError: position is not defined at gps.js?ver=1660778122:5:13 (anonymous) @ gps.js?ver=1660778122:5 と出ております つまり引数のpositionがどこかで定義する必要があるのでしょうか? htmlではposition定義せず、引数にposition入れるだけで使えていたのが謎になります。。
tabuu

2022/08/18 03:34

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

2022/08/18 04:04

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

2022/08/18 04:06

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

2022/08/18 07:12

>WordPressに導入する前に事前に実装した1枚のhtmlでは成功しているのです。 >同じブラウザです。 これは今までのやり取りで理解しています。 >同じブラウザなのに、こちらの1枚のhtmlでは許可を求めてくるのでしょうか? >同じブラウザなのに、WordPressにすると許可を求めてこないのでしょうか?(親画面・子画面関係なく) これを検証するために確認用のコードを提示させていただきました。
tuki43

2022/08/20 03:26

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

WordPress

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

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

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

Google マップ

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