JS memo

お洒落にJavaScript。

2019年3月4日22:13

【javascript】現在地の近くのWifiのあるカフェを探すアプリ

メインビジュアル

【javascript】現在地の近くのWifiのあるカフェを探すアプリ

JavaScriptで現在地の近くのWifiのあるカフェを探すアプリを作成してみました。

    目次

  1. アプリの内容
  2. ぐるなびAPI
  3. Google Map API
  4. htmlとcss
  5. javascript
  6. まとめ

アプリの内容

今回作成したアプリのイメージは以下のようになります。

__デモページ__

ページにアクセスすると、まず現在地を取得して、その付近のWifiのあるカフェを探して場所を地図に表示されます。お店の詳細は地図の下に表示されます。

今回はwifiのあるカフェの情報をぐるなびのAPIで入手し、地図はGoogle map APIを用いました。

herokuにサンプルページにアプリをアップしているので見て見てください。

では作成方法を手順通りに見ていきましょう。

ぐるなびAPIの登録

まず、Wifiのあるカフェの情報を入手するため、以下のページでぐるなびAPIの新規アカウントを登録します。

ぐるなび Web Service - 新規アカウント発行

アカウントを登録すると、アクセスキーがもらえるのでメモしておいてください。jsonファイルを取得する際のパラメーターで必要となります。

Google Map API

グーグルマップのAPIも以下のページから登録しておいてください。

Google Maps Platform - Geo-location API

登録後にAPI Keyがもらえます。こちらも後ほど使用するのでメモしておいてください。

htmlとcss

ぐるなびAPIとグーグルマップの登録が終わったら、地図とお店の詳細情報を表示させるhtmlを作成します。

html

<div id="content">
  <h1>現在地周辺のWifiが使えるカフェ</h1>
  <div id="map" class="map"></div> <!--mapを表示-->
  <ul id="shop-list"></ul> <!--お店の詳細情報を表示-->
</div>

お好みでcssを作成します。今回はでもページのcssを載せています。

css

*{
  margin:0;
  padding:0;
}
#map {
  width:100%;
  max-width: 680px;
  margin: 0 auto;
  height: 300px;
}
#shop-list {
  list-style: none;
  width: 100%;
}
#content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
span {
  display: block;
}
h1 {
  text-align: center;
  border-bottom: solid 1px #5555;
  margin: 20px;
  font-size: 20px;
}
a {
  display: flex;
  text-decoration: none;
  color: #555;
}
.each-shop {
  margin: 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px #5555;
  position: relative;
}
.shop-img {
  width:100px;
  height: 100px;
}
.shop-name{
  font-weight: bold;
  border-bottom: solid 1px #5555;
}
.time {
  font-size: 12px;
}
.shop-content {
  margin: 10px;
}
.fa-map-marker{
  position: absolute;
  top: -5px;
  left: -5px;
  color: red;
}
.icon {
  position: absolute;
  top: 0px;
  left: 3px;
  color: #fff;
  font-size: 20px;
}
@media screen and (min-width: 750px){
  h1 {
    font-size: 24px;
  }
}

JavaScriptの実行

では主役のJavaScriptを実装していきます。

地図を準備する準備

まずGoogle Map APIのファイルを読み込みます。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[グーグルマップのAPIKEY]"></script>

次に地図の表示場所とデフォルトを設定します。

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

現在地を取得して地図上に表示

現在地の緯度と経度を取得して、地図の中央が現在地になるよう設定します。また現在地のアイコンをカスタマイズします。

let a = navigator.geolocation.getCurrentPosition(get_pos);
function get_pos(position) {
  let lat = position.coords.latitude; // 緯度
  let lng = position.coords.longitude; // 経度
  let latLng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({ // 現在地の位置設定とアイコンのカスタマイズ
      position: latLng,
      map: map,
      icon: {
        url: 'Octocat.png',
        scaledSize: new google.maps.Size(40, 40)
      }
  });
  map.setCenter(latLng); // 地図の中央に現在地を表示する
}

Wifiのあるカフェの表示

ぐるなびの情報が入ったURLをパラメーターで指定して取得します。

パラメーターに指定するものは以下です。

  • ぐるなびのアクセスキー
  • wifiの指定
  • 現在地の緯度経度
  • 検索の範囲
  • 検索するお店のカテゴリー

ぐるなびAPIには何種類かありますが、今回使用したAPIはレストラン検索APIです。以下参照にして見てください。

レストラン検索API

先ほど作成したfunction、get_pos(position)の中に記載してください。

 $.ajax({
  type : "get",
  url : "https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=【ぐるなびアクセスキー】&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);
      var 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")
  }
);

今回はjQueryのAjaxを使用しています。

地図をカスタマイズ

ここからはオプションで地図をカスタマイズしていきます。

以下のページにお洒落なデザインのサンプルがたくさんあるので、そこから気に入ったもののコードを以下のstyleCustomに入れてください。

Snazzy Maps - Free Styles for Google Maps
var styleCustom = [
  // ここのカスタムする内容を記載
];
var sample = new google.maps.StyledMapType(styleCustom);
map.mapTypes.set('map', sample);
map.setMapTypeId('map');

デフォルトのデザインでも大丈夫なので、もし地図をお洒落にしたい!という方は使って見てください。

以上で地図は完成です!

まとめ

Google MapをJavaScriptで扱う方法が学べました。

ぐるなびの情報だけでは十分ではなく、starbucksとかドトールとかの情報が表示されていません。

もっと他のAPIを駆使して完璧な地図を作りたいです。