Q&A
phpmyadminはあくまでツールです。そこにデータを持っているわけではありません。という概念的な前提ですが、まず１つ、PHPでデータベースに保存するということ自体は質問者さん自身できていますか？ あと、できれば、「位置情報を取得する」プログラムを提示していただけると具体的な回答も得やすくなります。つまり、「今できているもの」と「できていないもの」を明確にして「できているもの」についてはなるべく情報提示することです。
前提・実現したいこと
google map APIを利用して、サイト登録ユーザー（赤の他人）の位置情報を
自分のmap上に表示したい。
発生している問題・エラーメッセージ
自分の位置情報を取得できるところまではいったが、
その位置情報（緯度・経度）を、phpmyadminに格納するやり方がわからない。
➡イメージとしては、ログイン時に位置情報を随時取得し、
phpmyadminの自分の位置情報に格納。
さらに、アクセス時に他ユーザーの位置情報を全て取得。
自身が開いているマップ上にその情報を表示。
みたいな感じで考えております。
補足情報（FW/ツールのバージョンなど）
あまりに素人で、どのような情報を回答者様にご提示したらよいかもわからないので、
何かあれば質問いただけるとお答えします。
よろしくお願いいたします。
以下、位置情報取得のソースコード。
html
1 2<html> 3 <head lang="ja"> 4 <meta charset="UTF-8"> 5 <link href="{{ asset('css/design.css') }}" rel="stylesheet"> 6 7 <script> 8 // 現在地取得処理 9 function initMap() { 10 // Geolocation APIに対応している 11 if (navigator.geolocation) { 12 // 現在地を取得 13 navigator.geolocation.getCurrentPosition( 14 // 取得成功した場合 15 function(position) { 16 // 自分の緯度・経度を変数に格納 17 var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 18 19 // マップオプションを変数に格納 20 var mapOptions = { 21 zoom : 15, // 拡大倍率 22 center : mapLatLng // 緯度・経度 23 }; 24 // マップオブジェクト作成 25 var map = new google.maps.Map( 26 document.getElementById("map"), // マップを表示する要素 27 mapOptions // マップオプション 28 ); 29 // マップにマーカーを表示する 30 var marker = new google.maps.Marker({ 31 map : map, // 対象の地図オブジェクト 32 position : mapLatLng // 緯度・経度 33 }); 34 }, 35 // 取得失敗した場合 36 function(error) { 37 // エラーメッセージを表示 38 switch(error.code) { 39 case 1: // PERMISSION_DENIED 40 alert("位置情報の利用が許可されていません"); 41 break; 42 case 2: // POSITION_UNAVAILABLE 43 alert("現在位置が取得できませんでした"); 44 break; 45 case 3: // TIMEOUT 46 alert("タイムアウトになりました"); 47 break; 48 default: 49 alert("その他のエラー(エラーコード:"+error.code+")"); 50 break; 51 } 52 } 53 ); 54 // Geolocation APIに対応していない 55 } else { 56 alert("この端末では位置情報が取得できません"); 57 } 58 } 59 </script> 60 61 </head> 62 63 <body> 64 <header> 65 <td align="center">xxxxxxx（サイト名）</td> 66 </header> 67 <aside></aside> 68 <main> 69 70 <div id="map" style="width:400px; height:300px"></div> 71 <script src="https://maps.googleapis.com/maps/api/js?key=【API key】></script> 72 73 </main> 74 <footer></footer> 75 </body> 76 77 78</html> 79
タグとしては「MySQL」（または「MariaDB」）のほうが適切なので、タグ追加しておいてもらえると。
mts10806さん 勘違いしておりました。ありがとうございます。ユーザー情報に関しては、phpでデータベースに保存するところはできています。また、ソースコードのせましたのでご確認をお願いいたします。
あまり長いコードではないのであれですが、ソースコードはなるべくマークダウンのcode機能を利用してください。https://teratail.com/help#about-markdown
細かいようで申し訳ないですが、JavaScriptではなくPHPなのでしょうか
すみません正直そのあたりからよくわかっていないです。phpの一部かと思っていましたが、おそらくjavascriptなのかもしれません。
scriptタグで囲われているのでJavaScriptですね。PHPはDBへの保存処理に利用されているのでは？提示可能な範囲でそちらのコードも提示いただけるともう少し回答が具体的にできます。（DB接続などされているようでしたらユーザーやパスワードは適当にマスクかけてもらって構いません）
ソースコードを追加しましたのでご確認いただけますでしょうか。
回答2件
0
ベストアンサー
「どのタイミングで保存をしたい」というところも含めて考えていただけると良いのですが、
「ユーザー情報を保管する」というコメントがあるところから、勝手に「ユーザー情報登録画面で地図から何かしら場所を選ぶ」仕様になっている、
ということだとエスパーして、
取得できた位置情報を文字列にして、inputのtype=hiddenに値として設置し、フォーム送信してはいかがでしょうか。
どのような形態で保管するかはDBのカラムの型に合わせてください。
投稿2018/11/11 15:12
総合スコア80888
保存のタイミングは、ログインした瞬間です。イメージとしては、
・ログインしたら自分の位置情報取得
・自分の位置情報をmySQLに保存
・mapに自分の位置情報と、他ユーザーの位置情報をピンで表示
➡他ユーザーの位置情報は他ユーザーがログインした最新のものを表示。
みたいな流れで想定しています。
位置情報送信って一回ユーザー許可のダイアログ挟むはずですが、そこはもし「許可しない」で送られても対応できるようにしないといけないですね。
「ログイン同時」なら私が回答で提示した内容で可能ですが、Ajaxの方が区別はつけやすいかなと思います。hiddenも不要ですし。
ログインボタン押下
→位置情報とユーザー入力のログイン情報をAjaxでphpに送信
→送信情報をphpで受け取り、バリデーション(位置情報を必須とするかは仕様。DBの型どうするかも仕様。つまり、質問者さんで決めてください)
→認証処理、成功したらDBに位置情報の保存処理
→成功、失敗を返してphp終了
→Ajaxの返りを受け取り認証後の処理へ
別の方も回答されていますが、DBに「位置情報を保存するテーブルとカラムを設けてそのカラムに保存する処理」は自分で書かないといけません。
ユーザー情報の登録と同じです。そのための情報をユーザーの入力から受けるか、今回のようにAPIから受けるかの違いだけで、渡したあとは同じですね。
どのテーブルにどのように保存するかは設計次第なので、利用しやすい形で保存すると良いです。
ありがとうございます。
差支えなければ、→の部分のソースコードを教えていただけますでしょうか。
現在の提示だけだと無理ですね。
ちょっと作業依頼っぽくなってるので、ヒントとして自分なりにやってみてください。
思ってるほど難しくはないと思いますし。
承知いたしました。頂いた情報をもとにやってみます。ありがとうございます。
調べたらある程度出てきそうなくらいには細分化はしてあります。
項目でどう調べたらいいか分からないものがあれば仰ってください。
まず、
→位置情報とユーザー入力のログイン情報をAjaxでphpに送信
までですが、以下のような感じでしょうか。
質問のソースコード // 自分の緯度・経度を変数に格納 の直下に、
<!--scriptからPHPへ渡す-->
$.ajax({
type: "POST",
url: " 自分が設定したSQL？ ",
data: {" 自分が定義したカラム？ ": mapLatLng },
})
いえ。urlはphpが実行されるurlです。
その先に送りたいデータをkey：value形式で設定すると、非同期でpost送信ができます。
あとは画面出力を伴わないphpの処理です。
もっと初歩的なところでつまづいてしまい先に進めなくなりました。ご丁寧にありがとうございます。少し出直してきます。
0
Javascriptでの位置情報の取得は Geolocation API で取得可能です。
【参考】位置情報をブラウザで取得するGeolocation APIを使って今いる住所を調べる
取得された経度、緯度の情報をMySQLの GEOMETRY 型に格納するイメージではないでしょうか？
【参考】MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
投稿2018/11/11 13:39
総合スコア2404
p16の【フロントから送られてきた位置情報を元にSQL分を発行】というところであっていますか？
これを実行すると、mySQLに情報が保存されるという理解でよいでしょうか？
p16のSQL文では格納できないですね。
ちゃんとMySQLのGEOMETRY型[MySQL リファレンス 11.5.3 空間データの使用](https://dev.mysql.com/doc/refman/5.6/ja/using-spatial-data.html)について調べて使用していただきたいと思いますが格納に関しては、以下のようなSQL文になるのではないでしょうか?
INSERT INTO spot (spot_id , latlon ) VALUES (1, GeomFromText('POINT(137.10 35.20)'));
なお、POINT(経度 緯度)のように指定します。
[位置情報サービスのはじめ方](http://gihyo.jp/dev/feature/01/location-based-services) という記事の中でサンプルとなりそうなアプリケーションの説明もありましたので参考にしてみてください。
難しそうなら無理にGEOMETRY型にしなくても 数値型で緯度と経度の列に格納してもよいと思います。
フロントからサーバー側には、ログインするときのPOST処理に取得した緯度,経度を一緒に送ってあげればよいと思います。
もっと初歩的なところでつまづいてしまい先に進めなくなりました。先に回答いただいた方をベストアンサーにしましたが、euledgeさんの回答も非常に勉強になりました。ありがとうございました。
あなたの回答
tips
プレビュー
