It is a map that searches for latitude and longitude from the posted address or place name like this and puts markers at each point. (You can also post your address like "1-1-2 Oshiage, Sumida-ku, Tokyo" (Skytree))
This time, we will proceed assuming that the map can be displayed using the Google Map API. If you don't understand how to display a map using GoogleMapAPI, please read the following article. [[Rails 6 / Google Map API] For beginners! Easy introduction of Google Map API with Ruby on Rails](https://qiita.com/nagaseToya/items/e49977efb6 86ed05eadb "About map display")
Please prepare a simple posting function. I created a maps table with an address column for posting addresses and place names. It is like this!
We will implement it according to the above flow!
$ rails g migration AddCoordinateToMaps latitude:float longitude:float
Create a migration file to add columns with the above command.
$ rails db:migrate
Don't forget to migrate!
Geocoding ――Q. What is Geocoding in the first place? ?? --A. Obtaining coordinates (latitude / longitude) from addresses and place names, or obtaining addresses and place names from coordinates. You can also get an address or place name from an IP address.
By the way, the following article has written in detail about Geocoding, so if you want to know more, please have a look. Rails Geocoder and Play
gem 'geocoder'
Write the above code in the gem file.
$ bundle install
Let's do bundle install
firmly ~!
Now you can use geocoder in rails.
map.rb
class Map < ApplicationRecord
geocoded_by :address
after_validation :geocode
end
In the : address
part, write the column you want to geocode.
If you describe these two lines for a model with ʻaddress,
latitude, and
longitude, the latitude and longitude will be obtained from the address and place name entered in ʻaddress
and saved in each column. Will do it.
And if you display latitude
and longitude
on the list screen, the latitude and longitude will be displayed as shown below.
However, if you post the address as it is, such as "1-1-2 Oshiage, Sumida-ku, Tokyo", you will not be able to obtain the latitude and longitude.
Create a config file with the following command.
$ rails g geocoder:config
A config file called config / initializers / geocoder.rb will be generated, so describe the API information of googlemap in that file.
ruby:config.initializers.geocoder.rb
Geocoder.configure(
# Geocoding options
timeout: 5, # geocoding service timeout (secs)
lookup: :google, # name of geocoding service (symbol)
api_key: 'YOUR_API_KEY', # API key for geocoding service
units: :km, # :km for kilometers or :mi for miles
)
Uncomment the four items timeout
, lookup
, ʻapi_key, and ʻunits
in the generated geocoder.rb
, and fill in the required items as shown in the above code.
By doing this, geocoder will be able to obtain even highly detailed addresses.
index.html.erb
<div id='map'></div>
<script>
let map
function initMap(){
geocoder = new google.maps.Geocoder()
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.68123620000001, lng:139.7671248},
zoom: 12,
});
<% @maps.each do |m| %>
(function(){
var contentString = "Street address:<%= m.address %>";
var marker = new google.maps.Marker({
position:{lat: <%= m.latitude %>, lng: <%= m.longitude %>},
map: map,
title: contentString
});
})();
<% end %>
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Like the code above<% @maps.each do |m| %>
~ <% end %>
If you write the code you want to repeat in the box, a marker will appear at the position of the posted address or place name.
-Rails Geocoder and Play -[[Rails 6 / Google Map API] For beginners! Easy introduction of Google Map API with Ruby on Rails](https://qiita.com/nagaseToya/items/e49977efb6 86ed05eadb "About map display") -[Display multiple markers using Google Maps API in Rails 5](https://qiita.com/yamaotoko4177/items/30b72766d013904452fa 86ed05eadb "About map display") -How to get latitude / longitude from address with Ruby on Rails and Google Geocoding API 86ed05eadb "About map display")
Recommended Posts