6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?