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

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

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

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

WordPress

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

モーダルダイアログ

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

JavaScript

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

Google マップ

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

Q&A

解決済

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クリップ

571閲覧

投稿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ファイル

1if (location.pathname === '/satei/satei_cycle'){ 2 //ユーザーの現在の位置情報を取得 3 navigator.geolocation.getCurrentPosition(successCallback, errorCallback); 4 5 /***** ユーザーの現在の位置情報を取得 *****/ 6 function successCallback(position) { 7 8 var requestAjax = function(endpoint, callback) { 9 var xhr = new XMLHttpRequest(); 10 xhr.onreadystatechange = function(){ 11 if (this.readyState==4 && this.status==200) { 12 callback(this.response); 13 } 14 }; 15 xhr.responseType = 'json'; 16 xhr.open('GET',endpoint,true); 17 xhr.send(); 18 }; 19 20 // 現在地の緯度 21 var latitude = position.coords.latitude; 22 // 現在地の経度 23 var longitude = position.coords.longitude; 24 25 var userMap = new google.maps.LatLng(latitude, longitude); 26 27 var apiKey = 'あああ'; 28 29 var opts = { 30 zoom: 11, 31 center: new google.maps.LatLng(latitude, longitude) 32 }; 33 34 var requestURL = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false'; 35 requestURL += '&latlng=' + latitude + ',' + longitude; 36 requestURL += '&key=' + apiKey; 37 38 // 現在地の緯度経度 39 var origin1 = {lat: latitude, lng: longitude}; 40 41 // Geocoderのオブジェクト 42 var geocoder = new google.maps.Geocoder; 43 44 // DistanceMatrixServiceのオブジェクト 45 var service = new google.maps.DistanceMatrixService; 46 47 // 店舗の経度緯度の配列(この配列と下記の連想配列の順番は同じにする) 48 var org = new Array(); 49 org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx)); //〇〇店 50 org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx)); //〇〇店 51 org.push(new google.maps.LatLng(35.xxxx, 139.xxxx)); //〇〇店 52 53 // 連想配列 店舗名と住所、3つ目に目的地までの距離を最終的に追加 54 var shopList = [ 55 {name:'〇〇店', add:'神奈川県xxxxx', lat:35.xxxx, lng:139.xxxx }, 56 {name:'〇〇店', add:'神奈川県xxxxxx', lat:35.xxxx, lng:139.xxxxx}, 57 {name:'〇〇店', add:'神奈川県xxxx, lat:35.xxx, lng: 139.xxxx}, 58 {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxx}, 59 {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxxx}, 60 {name:'〇〇店', add:'東京都xxxx', lat:35.xxx, lng: 139.xxx} 61 ]; 62 63 // DistanceMatrixの実行 64 service.getDistanceMatrix({ 65 origins: [origin1], 66 // 出発地のLatLngオブジェクトの配列 67 destinations: org, 68 //目的地のLatLngオブジェクトの配列 69 travelMode: 'DRIVING', 70 //DRIVING=自動車,BICYCLING=自転車,TRANSIT=電車,WALKING=徒歩 71 unitSystem: google.maps.UnitSystem.METRIC, 72 //距離を表示する際に使用される優先単位系 73 //METRIC=の距離をメートル法の単位で表す。 74 avoidHighways: false, 75 //true の場合、可能な限り高速道路を避ける(省略可) 76 avoidTolls: false 77 //true の場合、可能な限り有料道路を避ける(省略可 78 }, 79 function(response, status) { 80 if (status !== 'OK') { 81 alert('Error was: ' + status); 82 } else { 83 var originList = response.originAddresses; 84 var outputDiv = document.getElementById('output'); 85 outputDiv.innerHTML = ''; 86 87 for (var i = 0; i < originList.length; i++) { 88 var results = response.rows[i].elements; 89 90 // Geocoderの呼び出し 91 geocoder.geocode 92 93 for (var j = 0; j < results.length; j++) { 94 // xxxxx 数値 フォーマットされていないもの 95 var distance = results[j].distance.value; 96 // xx.x km フォーマットされたもの 97 var kyori = results[j].distance.text; 98 // 距離(単位メートル) 99 outputDiv.innerHTML += results[j].distance.text; 100 101 shopList[j].code = distance; 102 var n = shopList[j].code; 103 104 105 } 106 } 107 108 // 繰り返し処理終わった後で、shopList 距離順にソートかける 109 shopList.sort((a, b)=> { 110 if(a.code < b.code) return -1; 111 else if(a.code > b.code) return 1; 112 return 0; 113 }) 114 console.log(shopList); 115 116 var map = new google.maps.Map(document.getElementById("map2"), opts); 117 118 // 2番目までの店舗にピンを立てたい 119 // 1番近い店舗 120 var m_latlng1 = new google.maps.LatLng(shopList[0].lat, shopList[0].lng); 121 var marker1 = new google.maps.Marker({ 122 position: m_latlng1, 123 map: map, 124 title: shopList[0].name, 125 icon:{ 126 url: 'pin.png' 127 } 128 129 }); 130 131 // 2番目に近い店舗 132 var m_latlng2 = new google.maps.LatLng(shopList[1].lat, shopList[1].lng); 133 var marker2 = new google.maps.Marker({ 134 position: m_latlng2, 135 map: map, 136 title: shopList[1].name, 137 icon:{ 138 url: 'pin.png' 139 } 140 }); 141 142 // 3番目に近い店舗 143 var m_latlng3 = new google.maps.LatLng(shopList[2].lat, shopList[2].lng); 144 var marker3 = new google.maps.Marker({ 145 position: m_latlng3, 146 map: map, 147 title: shopList[2].name, 148 icon:{ 149 url: 'pin.png' 150 } 151 }); 152 153 // ユーザーの自宅にもピンを立てる 154 var marker4 = new google.maps.Marker({ 155 position: userMap, 156 map: map, 157 title: '現在地', 158 icon:{ 159 url: 'user-pin.png' 160 } 161 }); 162 163 // 並び替えが終わったshopListを元の画面に返す 164 } 165 }); 166 167 168 requestAjax(requestURL, function(response){ 169 170 if (response.error_message) { 171 alert("住所を取得することが出来ませんでした"); 172 console.log(response.error_message); 173 } else { 174 var formattedAddress = response.results[0]['formatted_address']; 175 // 住所は「日本、〒100-0005 東京都千代田区丸の内一丁目」の形式 176 var data = formattedAddress.split(' '); 177 if (data[1]) { 178 // id=addressに住所を設定する 179 document.getElementById('address').innerHTML = data[1]; 180 } 181 } 182 }); 183 } 184 185 /***** 位置情報が取得できない場合 *****/ 186 function errorCallback(error) { 187 var err_msg = ""; 188 switch(error.code) 189 { 190 case 1: 191 err_msg = "位置情報の利用が許可されていません"; 192 break; 193 case 2: 194 err_msg = "デバイスの位置が判定できません"; 195 break; 196 case 3: 197 err_msg = "タイムアウトしました"; 198 break; 199 } 200 alert(err_msg); 201 } 202 }; 203 204 205 206

PHP

1functions.php 2 3<?php 4 if ($isSelectGpsOver) { 5 ?> 6 <form name="select-shop-gps" method="post" action="/satei/satei_cycle"> 7 <div class="panel-heading"> 8 <h2 class="obi">現住所から選択</h2> 9 </div> 10 <div id="map2" style="width:620px; height:400px"></div> 11 <script async defer 12 src="https://maps.googleapis.com/maps/api/js?key=APIキーcallback=initMap"> 13 </script> 14 </form> 15 <?php 16 } 17 ?>

試したこと

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

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

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

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

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

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

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

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

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

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表示で地図を出すのをやめました。。。 お付き合いいただきありがとうございました。

回答2

1

ベストアンサー

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

JavaScript

1navigator.geolocation.getCurrentPosition(successCallback, errorCallback); 2 3function successCallback(position) { 4 console.log(position); 5} 6 7function errorCallback(error) { 8 console.log(error); 9}

投稿2022/08/17 23:12

tabuu

総合スコア2311

tuki43👍を押しています

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

tuki43

2022/08/20 03:28

Uncaught ReferenceError: position is not defined at gps.js?ver=1660778122:5:13 (anonymous) @ gps.js?ver=1660778122:5 と出るだけで、そもそもpositionが認識されていないようでした。 処理的にここまで頑張る必要はないので、もう地図を出すのをやめました。。。 ありがとうございました。

1

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

投稿2022/08/15 01:43

RiaFeed

総合スコア2687

tuki43👍を押しています

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

tuki43

2022/08/15 06:51 編集

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

2022/08/15 07:07

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

2022/08/17 09:08

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Geolocation

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

WordPress

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

モーダルダイアログ

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

JavaScript

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

Google マップ

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