javascriptで位置情報を取得し、グルメリサーチAPIを利用して周辺の飲食店を取得してみる

function getPosition(event) {
  const status = document.querySelector(".status");
  const mapLink = document.querySelector(".map-link");
  const p = document.querySelector(".page");
  const range = ranges.value;
  const start = event.target.value;
  const page = event.target.dataset.page;
  console.log(start);
  mapLink.href = "";
  mapLink.textContent = "";

  // ブラウザがGeolocation APIに対応しているかをチェック
  if (!navigator.geolocation) {
    status.textContent = "ブラウザがGeolocationに対応していません";
    // 対応している → 位置情報取得開始
    // 位置情報取得成功時にsuccess()、そして取得失敗時にerror()がコールされる
    // optionsはgetCurrentPosition()に渡す設定値
  } else {
    status.textContent = "Locating…";
    navigator.geolocation.getCurrentPosition(success, error);
  }
  // 位置情報取得処理が成功した時にコールされる関数
  // 引数として、coords(coordinates。緯度・経度など)とtimestamp(タイムスタンプ)の2つを持ったpositionが渡される
  async function success(position) {
    status.textContent = "";
    const latitude = 35.690921; // 緯度取得
    const longitude = 139.70025799999996; // 経度取得
    // 緯度・経度を地図上で確認するためにGoogleMapへのリンクを作成
    mapLink.href = <code>https://maps.google.co.jp/maps?q= ${latitude} , ${longitude};
    mapLink.textContent = 緯度:${latitude}  経度:${longitude}  googlemapで現在地を確認する;
    p.textContent = ${page}ページ目を表示ていています。;

    // クエリをFormDataに格納する
    const postData = new FormData(); // フォーム方式で送る場合
    postData.set("latitude", latitude); // set()で格納する
    postData.set("longitude", longitude);
    postData.set("range", range);
    postData.set("start", start);

    const data = {
      method: "POST",
      body: postData,
    };
    // FetchApiを使ってグルメサーチAPIからjsonを取得するリクエストをする
    const res = await fetch("main.php", data);
    const d = await res.json();
    const json = await JSON.parse(d);

    renderJson(json);
  }

  // 位置情報取得処理が失敗した時にコールされる関数
  // 引数として、code(コード)とmessage(メッセージ)の2つを持ったpositionErrorが渡される
  function error(positionError) {
    switch (positionError.code) {
      case 0: // 0:UNKNOWN_ERROR
        status.textContent = "原因不明のエラーが発生しました。";
        break;
        
      case 1: // 1:PERMISSION_DENIED
        status.textContent = "	位置情報の取得が許可されませんでした。";
        break;

      case 2: // 2:POSITION_UNAVAILABLE
        status.textContent = "電波状況などで位置情報が取得できませんでした。";
        break;

      case 3: // 3:TIMEOUT
        status.textContent =
          "位置情報の取得に時間がかかり過ぎてタイムアウトしました。";
        break;
    }
  }
}

<?php
// javascriptから送られてきたクエリを変数に代入
$latitude =  $_POST['latitude']; 
$longitude = $_POST['longitude'];
$range = $_POST['range'];
$start = $_POST['start'];
// クエリをまとめる
$query = [
    'key' => 'APIキー', // <-- ここにあなたのAPIキーを設定してください。
    'lat' => $latitude, // 緯度
    'lng' => $longitude, // 経度
    'range' => $range, // 検索範囲
    'start' => $start, // 検索の開始位置
    'format' => 'json', // レスポンス形式
];
// グルメサーチAPIからjsonを取得
$url = 'https://webservice.recruit.co.jp/hotpepper/gourmet/v1/?';
$url .= http_build_query($query);
$response = file_get_contents($url);
$json = json_encode($response);

echo ($json);