Posted at

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