Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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と組み合わせる必要があると思います。

yunkikki
Djangoの全てを知りたい🙋‍♀️
https://developer.yukimonkey.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away