[RUBY] Display the address entered using Rails gem'geocoder' on Google Map

If the address is like "Chiyoda-ku, Tokyo", the latitude and longitude will be acquired and displayed on Google Map, but if you specify the address like "2-4-1 Marunouchi, Chiyoda-ku, Tokyo", the latitude and longitude will be acquired. I couldn't do it and the map wasn't displayed, but I was able to resolve it, so I posted it.

Preparation

・ First, get the API to use googlemap. Click here to get the API (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb)

-Create a column to save the address and a column to save the latitude and longitude. latitude / longitude is latitude / longitude.

schema.rb


create_table "tours", force: :cascade do |t|
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "address", null: false
    t.float "latitude"
    t.float "longitude"
  end

Files that appear

・ Gemfile ・ Tour.rb ・ .Gitignore ・ .Env ・ Geocorder.rb ・ Show.html.erb

Gemfile geocorder bundle install

gem 'geocoder'

tour.rb Add the following

tour.rb


geocoded_by :address
after_validation :geocode, if: :address_changed?

Save latitude and longitude from the address entered by geocoded_by. after_validation: geocode saves the changed latitude and longitude even if the address changes later.

.gitignore ・ .env

Add .env to .gitignore. This doesn't go up on github.

.gitignore


/.env

Add the following to .env. Make the part of YOUR_API_KEY the acquired API key.

.env


GOOGLEMAP=YOUR_API_KEY

geocorder.rb Create config / initialize / geocorder.rb with rails g geocoder: config and add the following. The acquired API is entered in the api_key part.

geocorder.rb


Geocoder.configure(
  lookup: :google,
  always_raise: [
    Geocoder::OverQueryLimitError,
    Geocoder::RequestDenied,
    Geocoder::InvalidRequest,
    Geocoder::InvalidApiKey
  ],
  api_key:  ENV['GOOGLEMAP'] ,
  use_https: true
)

show.html.erb Finally paste googlemap into show.html.erb

show.html.erb


<div id="map"></div>
<style>
     #map {
     height: 500px;
     width: 70%;
    }
</style>
<script>
  function initMap() {
	var uluru = {lat: <%= tour.latitude %>, lng: <%= tour.longitude %>};
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 16,
	enter: uluru
	});
	var marker = new google.maps.Marker({
	  position: uluru,
	  map: map
	});
       }
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLEMAP'] %>&callback=initMap"async defer></script>

After that, you can adjust the height and width according to your size preference.

Recommended Posts

Display the address entered using Rails gem'geocoder' on Google Map
[Rails 6 / Google Map API] Post an address and set multiple markers on the map
[Rails] How to display Google Map
Display multiple markers on Google Map
Let's display the map using Basemap
[Ruby on Rails] Display and pinning of GoolgeMAP using Google API
[Map display] Display a map from the address registered by the user using the Google Maps JavaScript API and Geocoding API!
[Android] Display images on the web in the info Window of Google Map
How to display Map using Google Map API (Android)
[Rails] How to calculate latitude and longitude with high accuracy using Geocoding API and display it on Google Map
Display the weather forecast on M5Stack + Google Cloud Platform
[Rails] How to display multiple markers on Google Map and display a balloon when clicked
Display the absolute path on the Finder
Notes on using matplotlib on the server
Introducing Google Map API with rails
[Rails] google maps api How to post and display including map information
Use The Metabolic Disassembler on Google Colaboratory
Notes on using OpenCL on Linux on the RX6800
Image segment using Oxford_iiit_pet on Google Colab
Verify coordinates on Google Map with Geocoder
Plot the environmental concentration of organofluorine compounds on a map using open data
I tried to display the infection condition of coronavirus on the heat map of seaborn