2012-12-20

HTML5 Geolocation API + Google Maps API (on rails)

HTML5のGeolocation APIの続き。
Geolocation APIから取得した位置情報をGoogle Maps APIに渡して地図の表示までやってみた。
ので、φ(`д´)メモメモ...
実装は前回同様、ViewとAssetの中にあるJavascript(CoffeeScript)を編集。

View: test/_form.erb
<div class="field">
   <%= button_tag("位置情報を取得", {:type => "button", :id => "test_getGeolocation", :name => "test_getGeolocation"}) %>
   <br />
   <%= f.label :place %><br />
   <%= f.text_field :place %>
   <br />
   <div id="map_canvas" name="map_canvas" style="width:300px; height:160px"></div>
   <%= f.hidden_field :latitude %>
   <%= f.hidden_field :longitude %>
</div>


Asset(javascript): test.js.coffee
$ ->
  $('#test_getGeolocation').click ->
    if !navigator.geolocation
      alert 'No support :('
    else
      navigator.geolocation.watchPosition (position) ->
        infowindow = new google.maps.InfoWindow();
        lat = parseFloat position.coords.latitude # 緯度
        lng = parseFloat position.coords.longitude # 経度
        $('#test_latitude').val lat
        $('#test_longitude').val lng
        latlng = new google.maps.LatLng lat, lng
       
        map = new google.maps.Map $('#map_canvas').get(0),
          zoom:      18,
          center:    latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       
        geocoder = new google.maps.Geocoder()
        geocoder.geocode
          'latLng': latlng,
          (results, status) ->
            if status == google.maps.GeocoderStatus.OK
              if results[1]
                marker = new google.maps.Marker
                  position: latlng,
                  map:      map
                $('#test_place').val(results[0].formatted_address)
            else
              alert 'Geocoder failed due to: ' + status
 


これを実行すると、
こんな感じに。
緯度経度のfloat型数値はhiddenで隠しました。
Placeという入力欄には、住所が入る予定です。
 "位置情報を取得"ボタンをクリックすると、位置情報取得確認の後に、
住所とマップがとれます。
住所とマップ共に大雑把な感じにしていますが、本当は番地まで取得できます。

0 件のコメント:

コメントを投稿