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

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

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

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

地図を表示

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を中心とした地図を表示します。