[RUBY] 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.

Recommended Posts

Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map
[Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte
[Rails] Comment afficher Google Map
Afficher plusieurs marqueurs sur Google Map
Affichons la carte en utilisant Basemap
[Ruby on Rails] Affichage et épinglage de GoolgeMAP à l'aide de l'API Google
[Affichage de la carte] Affichez une carte à partir de l'adresse enregistrée par l'utilisateur à l'aide de l'API JavaScript de Google Maps et de l'API de géocodage!
[Android] Afficher des images sur le Web dans la fenêtre info de Google Map
Comment afficher la carte à l'aide de l'API Google Map (Android)
[Rails] Comment calculer la latitude et la longitude avec une grande précision à l'aide de l'API Geocoding et l'afficher sur Google Map
Consultez les prévisions météo sur M5Stack + Google Cloud Platform
[Rails] Comment afficher plusieurs marqueurs sur Google Map et afficher une bulle lorsque vous cliquez dessus
Afficher le chemin absolu sur le Finder
Remarques sur l'utilisation de matplotlib sur le serveur
Présentation de l'API Google Map avec rails
[Rails] google maps api Comment publier et afficher des informations cartographiques
Utilisez le désassembleur métabolique sur Google Colaboratory
Segment d'image utilisant Oxford_iiit_pet dans Google Colab
Vérifiez les coordonnées sur Google Map avec Geocoder
Essayez de tracer la concentration environnementale des composés organiques du fluor sur une carte à l'aide de données ouvertes
J'ai essayé d'afficher le degré d'infection par le virus corona sur la carte thermique Seaborn