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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

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

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

2150閲覧

現在地を取得してからMySQL内のデータを表示させたい

Daur

総合スコア13

Google API

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

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/01/09 06:15

編集2022/01/12 10:55

現在地を取得してからMySQL内のデータを表示させたい

Geolocation APIを使って現在地を取得して、PHPMyadmin内にあるデータベースのデータをマップ上に表示させたい。
(例)今いる現在地からデータベース内にある店舗情報を表示させるシステムを作っています。
データベース内の店舗データを取り出す機能を制作したいと考えています。

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

発生している問題として、https://rikulog.com/programing/google-map-api/#i-2 を参考にしながら制作しています。

エラーメッセージ

### どう書けばいいのかがわかりません。。 ```PHP,Javascript,html,css ソースコード <!DOCTYPE html> <html> <head> <title>Simple Map3</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } .sample { width: 100px; height: 50px; } </style> </head> <body> <div id="map" style="height: 500px; width: 50%; margin: 2rem auto 0;"></div> <button id="getcurrentlocation">getcurrentlocation</button> <!-- jquery読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- google map api --> <script src="https://maps.googleapis.com/maps/api/js?key=YourApiKey&libraries=places" ></script> <!-- js --> <script src="index3.js" async></script> </body> </html> #JavaScript $(function(){        'use strict';         var map; var service; var infowindow; var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316); createMap(pyrmont) // 現在地取得 document.getElementById('getcurrentlocation').onclick = function() { geoLocationInit(); } function geoLocationInit() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, fail); } else { createMap(pyrmont); } } // success function success(position) { var currentLat = position.coords.latitude; var currentLng = position.coords.longitude; var pyrmont = new google.maps.LatLng(currentLat,currentLng); createMap(pyrmont) CurrentPositionMarker(pyrmont); } // fail function fail(pyrmont) { createMap(pyrmont); } function createMap(pyrmont) { map = new google.maps.Map(document.getElementById('map'), { center: pyrmont, zoom: 15 }); nearbysearch(pyrmont) } function createMarker(latlng, icn, place) { var marker = new google.maps.Marker({ position: latlng, map: map }); var placename = place.name;           // 吹き出しにカフェの名前を埋め込む var contentString = `<div class="sample"><p id="place_name">${placename}</p></div>`; // 吹き出し var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加 content: contentString// 吹き出しに表示する内容 }); marker.addListener('click', function() { // マーカーをクリックしたとき infoWindow.open(map, marker); // 吹き出しの表示 }); } // 現在地のアイコンを表示 function CurrentPositionMarker(pyrmont) { var image = 'http://i.stack.imgur.com/orZ4x.png'; var marker = new google.maps.Marker({ position: pyrmont, map: map, icon: image }); marker.setMap(map); } // 周辺のカフェを検索 function nearbysearch(pyrmont) { var request = { location: pyrmont, radius: '1500', type: ['cafe'] }; service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) {         //取得したカフェ情報をそれぞれcreateMarkerに入れて、マーカーを作成 for (var i = 0; i < results.length; i++) { var place = results[i]; //console.log(place) var latlng = place.geometry.location; var icn = place.icon; createMarker(latlng, icn, place); } } } } }); ### 試したこと 別々に実装はできた。 ・マップを表示 ・配列にデータベース内のデータ格納して表示 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問