javascriptで位置情報を取得し、グルメリサーチAPIを利用して周辺の飲食店を取得してみる - プログラミングを学習中の私が、アウトプットするためのサイト

このページではソースコードの一部分を簡単な解説をしています。

作成したページはコチラから
ソースコードはgithubにあります

概要
位置情報を取得する
グルメサーチAPIからjsonを取得する
グルメリサーチAPIを使用する際の注意点

概要

javascriptのGeolocationAPIで位置情報を取得し、グルメリサーチ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 = `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;
    }
  }
}

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 = `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;

}

まず初めに<strong>navigator.geolocation</strong>を使いブラウザがGeolocation APIに対応しているかをチェックし、対応している場合はnavigator.geolocation.getCurrentPosition(success, error)で位置情報を取得します。<strong>getCurrentPosition</strong>メソッドの第一引数には位置情報の取得成功時に実行されるコールバック関数をセットし、第二引数には取得失敗時に実行されるコールバック関数をセットします。取得が成功した場合は24行目のsuccess関数が実行され、座標などグルメサーチAPIリクエスト時必要なパラメーターをまとめ、FetchApiを使いリクエストしています。

グルメサーチAPIからjsonを取得する

<?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);

<?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);

今回はPHPを使ってグルメリサーチAPIへリクエストしました。グルメサーチAPIリクエスト時必須パラメーターは二つあり、APIキーと店名、住所、駅名などのキーワードか座標が必要になります。APIキーはコチラから取得できます。

グルメリサーチAPIを使用する際の注意点

グルメリサーチAPIで提供されているURLはすべてhttp：になっているので https： に直す必要があります。 https： に直さないと混在コンテンツとなり、位置情報は取得できません。

最後までお読みいただきありがとうございました。