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

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

ただいまの
回答率

87.58%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 876

score 13

現在地を取得してから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/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2020/01/10 18:44

    3-7. markdownを利用しましょう
    https://teratail.com/help/question-tips#questionTips3-7


    店舗数は何件ぐらいでしょう?
    数十件程度なら、何も気にせずに全部プロットしてしまえばいいと思います。

    キャンセル

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

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

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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