RailsでGoogle mapsを使いこなすためのメモ 1 / 地図(現在位置を中心とした地図)を表示

Google Maps APIは住所登録の時くらいしか使ったことなかったので、表示側も頑張りたいなというシリーズ。Railsを使ったアプリでどう組み込んでいけばいいのかなと。

Google Maps APIの基本が知りたいので、Google-Maps-for-Railsはなしでということで。

お店が沢山登録してあるDBがあって、その情報を地図に落とすという想定。
さて、どうやってピン落とすかな…。
とりあえず、こんな流れにしてみた。
  
RailsでGoogle mapsを使いこなすためのメモ

  1. 地図(現在位置を中心とした地図)を表示 今ココ

  2. 地図デザインのカスタマイズ

  3. 表示範囲に含まれる情報をDBから取り出す

  4. 取り出したデータを使って地図にピンを落とす

  5. すでに存在するピンは再度取得しないようにする
      

地図を表示

google_maps.coffee.erb

coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

if $('#map_canvas').length
    # 鳥取駅をデフォルトの位置とする
    default_point = new google.maps.LatLng(35.494317, 134.225368)

    # マップ作成
    # map_canvasというIDがついているdivを指定
    window.big_map = new google.maps.Map(
        document.getElementById('map_canvas'),
        {
        center: default_point, #設定しないとSafariで表示されなかった
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
        }
    )

    # ユーザーの現在位置取得を試みる
    if navigator.geolocation
        # 鳥取県の範囲を指定
        tottori_area_coords = [
            new google.maps.LatLng(35.57985414012871, 133.12805255937496),
            new google.maps.LatLng(35.65130415054386, 134.52331623124996),
            new google.maps.LatLng(35.16778016004279, 134.56726154374996),
            new google.maps.LatLng(34.99696260051415, 133.05114826249996)
        ]
        tottori_area = new google.maps.Polygon({ paths: tottori_area_coords })

        # ユーザーの現在位置が鳥取県の範囲内だったら、
        # 現在位置を中心とした地図にする
        navigator.geolocation.getCurrentPosition (position) ->
            current_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            if google.maps.geometry.poly.containsLocation(current_location, tottori_area)
                big_map.setCenter(current_location)
            # 鳥取県意外から見られている場合は、鳥取駅を表示する
            else
                big_map.setCenter(default_point)
    # geolocationが有効でなければ、鳥取駅を表示する
    else
        big_map.setCenter(default_point)

鳥取県のお店を紹介するぜ!というサイトを想定。
default_pointは、ユーザーの現在位置が取れなかったり、全然違うところからアクセスされても鳥取県の地図が表示されるようにするために設定してます。
  
window.big_map = new google.maps.Mapで地図を作成します。
あらかじめviewファイルに id="map_canvas" がついたdivを作成しておいてください。
  
navigator.geolocationでユーザーの現在位置取得を試みます。
取得できなかった時はdefault_pointを中心に地図を表示します。

また鳥取県内からアクセスしているかどうかチェックするため、tottori_areaでPolygonを作成しています。あくまで鳥取県を内包する四角形をつくっているだけですが、これはこれでいいんじゃないでしょうか。
  
containsLocationで、先ほど作成したPolygon内に、現在位置が含まれているかどうかチェックしています。含まれていれば現在位置を中心とした地図を、含まれていなければdefault_pointを中心とした地図を表示します。

参考

ActionController::LiveとServer-Sent Events で地図上にじわじわ表示する

Google Maps入門(Google Maps JavaScript API V3)

Flea Markets Neukölln, Berlin, Germany (地図を使うサイトの例)

Google Maps API デモ ギャラリー

現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]

Googleマップをイラストマップみたいにしたい。

Add Markers to a Google Map With Ruby on Rails and JSON

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた