Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@inamori

Google Mapのレストラン口コミ評価が良いエリアを可視化する

More than 1 year has passed since last update.

概要

Google Mapのレビュー点数が高いレストランが集まるエリアってどこなんだろ?と疑問に思い、ヒートマップにしてみました

レビューのレーティングを取ってくる

Place Search APIを使います。このWrapperを使わせて頂きました

  • 単純にレストランの位置×レビューをプロットするとレストランが多い地域が赤いヒートマップになるだけなので、エリアをグリッド状に分割して、各グリッド内のレストランの平均レーティングで重み付けする想定で行きます
  • 今回グリッドは約500m刻みになるよう設定したので、 radius を500とします
  • 結果は最大20件までなのでレストラン密集地域ではAPIお任せのランダムな20件の平均となります
fetch_rating.rb
@client = GooglePlaces::Client.new(API_KEY)
col_num.times do |c|
  row_num.times do |r|
    lng = south_west[:lng] + c * diff
    lat = south_west[:lat] + r * diff
    result = @client.spots(lat, lng, language: :ja, types: :restaurant, radius: 500)

    # 平均出したりする処理...
  end
end

料金について

  • 東京都だけに絞っても、網羅的にやろうとすると2188km²/0.25km²=約8700requestが必要
  • 料金は$13/1000reqぐらいになりそうなのでご利用は計画的に(今回取った範囲は無料クレジット内に収まりました)

ヒートマップを描画する

  • KibanaやTableauをこの為に用意するのは面倒
  • Google Data Studioなら無料かつ手軽にヒートマップ化できるが、ズームレベルが「国」までしか選べない(USなら州までいける) image.png
  • という事でMaps JavaScript APIのHeatmapLayerを使います

HeatmapLayer

  • HeatmapLayerに渡すデータに weight を含ませると重み付けができる(weight: 3なら内部的に3つの点がプロットされる扱いとなる)
  • しかし線形に反映されるだけだとこんな感じにメリハリの無いヒートマップになってしまう image.png
  • なので適当に weight = Math.pow(weight, 3) とかして非線形にします

結果はこんな感じです。
西麻布、目黒近辺、あとなんか西の方が強いですね。
image.png

heatmap.js
  fetch('summary.json')
    .then(response => response.json())
    .then(json => {
      const heatmapData = json.map(d => {
        const location = new google.maps.LatLng(d['location']['lat'], d['location']['lng'])
        const weight = Math.max(0, Math.pow(d['avg'] - 3, 3))
        return {location, weight}
      })
      const map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(35.672196, 139.729521),
        zoom: 12.3,
        maxZoom: 12.6,
        minZoom: 12,
        disableDefaultUI: true
      })
      const heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        radius: 40,
        opacity: 0.5,
        gradient: ['white', '#ffff99', '#fff000', '#ff0000'],
      })
      heatmap.setMap(map)
    })

こちらで動くものが見られます。
内緒だけど、こちらでレビューが低い地域が赤くなるバージョンも見られます。

2
Help us understand the problem. What is going on with this article?
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

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?