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 件のコメント:
コメントを投稿