やりたいこと
京都駅と記入して、青いボタンの登録をすると、下に京都駅のgoogle mapが出てくる。
gem追加
Gemfile
gem 'geocoder'
ターミナル
bundle install
モデル説明
今回は、shopモデルに住所を入れたいとする
shopモデル
上の図の説明は、shopモデルである。店の名前と来客人数のカラムを作ってある。
googlemap表示のために、カラムaddress latitude longtudeを追加する。
ターミナル
rails generate migration AddaddressLatitudeAndLongitudeToShop address:string latitude:float longitude:float
shop.rb
geocoded_by :address
after_validation :geocode, if: :address_changed?
上の記述で、 住所（カラムaddress）を入れたときに、自動でその住所の緯度、経度をカラムlatitude,
longitudeに記述してくれる。
登録画面
show.html.erb
<%= form_for @shop :url => {:action => :update} do |f| %>
<div class="text-center"><%= f.text_field :address %></div>
<%= f.submit "住所登録", class: "btn btn-primary center-block" %>
<% end %>
<body>
<div id="map"></div>
<style>
#map {
height: 500px;
width: 70%;
}
</style>
<script>
function initMap() {
var uluru = {lat: <%= @shop.latitude %>, lng: <%= @shop.longitude %>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
下からの３行目YOUR_API_KEY記述がある。 これは、各自でgooglemapAPIからkey取得する必要がある。
http://qiita.com/kitaokeita/items/a7f33615940e67c13820
このリンクにkey取得のやり方が書かれているので参考してください