【JavaScript】現在地からwifiのあるカフェを探すアプリを作って見た

Wifi環境下で勉強できる場所を見つけるのが大変だったので、現在地からwifi付きのカフェを探すアプリを作成して見ました。

実装環境

Mac OS Sierra
Atom

使用するもの

ぐるなびAPIのKey
Google Map APIのKey

作成手順

1. 地図とカフェのリストを表示するhtml作成とgoogle mapのAPIの読み込み

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[グーグルマップのAPIKEY]"></script>
<div id="content">
  <h1>現在地周辺のWifiが使えるカフェ</h1>
  <div id="map" class="map"></div>
  <ul id="shop-list"></ul>
</div>

2. グーグルマップの準備

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
  });
}

3. javascriptで現在地を取得して地図に表示

let a = navigator.geolocation.getCurrentPosition(test2); 
function test2(position) {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
let myPosi = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
  position: myPosi,
  map: map,
  icon: {
    url: 'Octocat.png',
    scaledSize: new google.maps.Size(40, 40)
    } 
  });

4. 現在地の近くのwifiのあるカフェを探す

さっきの続きです。

  $.ajax({
    type : "get",
    url　: "https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=[ぐるなびAPIのKEY]&wifi=1&latitude="+lat+"&longitude="+lng+"&range=4&category_l=RSFST20000,RSFST18000",
    dataType : 'json',
    success　: function(json){
      let num_shop = json.rest.length;
      for( let i = 0; i < num_shop; i++){
        console.log(json.rest[i].url);
        let latLng = new google.maps.LatLng(json.rest[i].latitude, json.rest[i].longitude);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          label: {
            text: String(i+1),
            color: "#fff",
            fontWeight: 'bold',
            fontSize: '14px'
            },
            url: json.rest[i].url,
          });
          google.maps.event.addListener(marker, 'click', (function(url){
            return function(){ location.href = url; };
          })(json.rest[i].url));
          $('<li class="each-shop"><i class="fas fa-map-marker fa-3x"></i><span class="icon">'+ String(i+1) + '</span><a href="' + json.rest[i].url + '"><img class="shop-img" src=' + json.rest[i].image_url.shop_image1 + '><span class="shop-content"><span class="shop-name">' + String(i+1) + " " + json.rest[i].name + '</span><span class="time">営業時間：' + json.rest[i].opentime + '</span></span></a></li>').appendTo('#shop-list');
         }
      },
      error: function(json){
        console.log("error")
      }
 });
}

まとめ

デモページ
https://map-wifii.herokuapp.com/index.html
詳細
http://yukimonkey.com/js-application/map-wifi/

探すことはできるのですが、そもそもぐるなびAPIにスターバックスやドトールなどの情報がなく、リソース不足だったので、他のAPIと組み合わせる必要があると思います。