Zeigen Sie die mit Rails gem'geocoder 'eingegebene Adresse in Google Map an

Wenn die Adresse "Chiyoda-ku, Tokio" lautet, werden der Breiten- und Längengrad erfasst und auf Google Map angezeigt. Wenn Sie jedoch die Adresse "2-4-1 Marunouchi, Chiyoda-ku, Tokio" angeben, erhalten Sie den Breiten- und Längengrad. Ich konnte es nicht tun und die Karte wurde nicht angezeigt, aber ich konnte es auflösen, also habe ich es gepostet.

Vorbereitung

• Lassen Sie zuerst die API googlemap verwenden. Klicken Sie hier, um die API zu erhalten (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb)

• Erstellen Sie eine Spalte zum Speichern der Adresse und eine Spalte zum Speichern des Breiten- und Längengrads. Breite / Länge ist Breite und Länge.

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

Dateien, die angezeigt werden

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

Gemfile Geocorder Bundle Install

gem 'geocoder'

tour.rb Fügen Sie Folgendes hinzu

tour.rb

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

Speichern Sie Breiten- und Längengrade von der von geocoded_by eingegebenen Adresse. after_validation: Geocode speichert den geänderten Breiten- und Längengrad, auch wenn die Adresse später geändert wird.

.gitignore ・ .env

Fügen Sie .env zu .gitignore hinzu. Dies geht nicht auf Github.

.gitignore

/.env

Fügen Sie Folgendes zu .env hinzu. Verwenden Sie den erhaltenen API-Schlüssel für YOUR_API_KEY.

.env

GOOGLEMAP=YOUR_API_KEY

geocorder.rb Erstellen Sie config / initialize / geocorder.rb mit rails g geocoder: config und fügen Sie Folgendes hinzu. Die erfasste API wird im Teil api_key eingegeben.

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 Fügen Sie schließlich die Google Map in show.html.erb ein

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>

Danach können Sie die Höhe und Breite entsprechend Ihrer Größeneinstellung anpassen.