Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map

Si l'adresse est comme "Chiyoda-ku, Tokyo", la latitude et la longitude seront acquises et affichées sur Google Map, mais si vous spécifiez l'adresse comme "2-4-1 Marunouchi, Chiyoda-ku, Tokyo", vous obtiendrez la latitude et la longitude. Je n'ai pas pu le faire et la carte n'était pas affichée, mais j'ai pu la résoudre, alors je l'ai postée.

Préparation

-Tout d'abord, obtenez l'API pour utiliser googlemap. Cliquez ici pour obtenir l'API (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb)

-Créer une colonne pour enregistrer l'adresse et une colonne pour enregistrer la latitude et la longitude. la latitude / longitude correspond à la latitude et à la 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

Fichiers qui apparaissent

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

Gemfile géocorder installation groupée

gem 'geocoder'

tour.rb Ajoutez ce qui suit

tour.rb

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

Enregistrez la latitude et la longitude de l'adresse saisie par geocoded_by. after_validation: geocode enregistre la latitude et la longitude modifiées même si l'adresse est modifiée ultérieurement.

.gitignore ・ .env

Ajoutez .env à .gitignore. Cela ne monte pas sur github.

.gitignore

/.env

Ajoutez ce qui suit à .env. Utilisez la clé API obtenue pour YOUR_API_KEY.

.env

GOOGLEMAP=YOUR_API_KEY

geocorder.rb Créez config / initialize / geocorder.rb avec rails g geocoder: config et ajoutez ce qui suit. L'API acquise est saisie dans la partie api_key.

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 Enfin, collez la carte google dans 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>

Après cela, vous pouvez ajuster la hauteur et la largeur en fonction de vos préférences de taille.