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

Cible

** Afficher l'adresse enregistrée par l'utilisateur au centre de la carte et définir un marqueur. ** ** ezgif.com-video-to-gif (1).gif

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

Présentation mince

Comme la précision est faible uniquement avec gem'geocoder' (il y a des zones où l'adresse ne peut pas être spécifiée), Nous allons l'implémenter afin que la latitude et la longitude puissent être spécifiées à partir de l'adresse avec une grande précision en utilisant l'API de géocodage.

Activer l'API de géocodage

1. Accédez au lien ci-dessous

Google Cloud Platform

2. Cliquez sur "Accéder à la vue d'ensemble de l'API"

スクリーンショット 2020-06-03 10.01.36.png

3. Cliquez sur "Bibliothèque"

スクリーンショット 2020-06-03 10.01.41.png

4. Entrez "geo" dans le formulaire de recherche et cliquez sur "Geocoding API"

スクリーンショット 2020-06-03 10.02.08.png

5. Cliquez sur "Activer"

スクリーンショット 2020-06-03 10.02.13.png

6. Cliquez sur la pièce entourée par le cadre rouge

スクリーンショット 2020-06-03 10.02.31.png

7. Un menu déroulant s'affiche. Cliquez sur "Toutes les API Google Maps".

スクリーンショット 2020-06-03 10.04.02.png

8. Cliquez sur "Credentials"

スクリーンショット 2020-06-03 10.12.39.png

9. Cliquez sur "Nom de la clé API"

スクリーンショット 2020-06-03 10.12.46.png

10. Définissez les informations d'authentification

** ① Restrictions API ** Sélectionnez «Restrictions clés» et sélectionnez «API de géocodage» dans le menu déroulant.

** ② Assurez-vous que Maps JavaScript API et Geocoding API sont sélectionnés, puis cliquez sur Save **

スクリーンショット 2020-06-03 10.13.14.png

11. Vérifiez s'il existe deux API

La clé API ne sera pas modifiée en ajoutant l'API, c'est donc la fin.

スクリーンショット 2020-06-03 10.13.25.png

la mise en oeuvre

1. Présentez Gem

Gemfile


gem 'gon'
gem 'geocoder'

gem 'gon' ➡︎ Rendez les variables d'instance définies dans le contrôleur disponibles dans le JavaScript de la vue.

gem 'geocoder' ➡︎ Calculez la latitude et la longitude à partir de l'adresse.

Terminal


$ bundle

2. Créez et éditez le fichier de configuration de geocorder

Terminal


$ touch config/initializers/geocoder.rb

geocoder.rb


#Postscript
Geocoder.configure(
  lookup: :google,
  api_key: ENV['GOOGLE_MAP_API']
)

Vous pouvez maintenant utiliser l '«API de géocodage» et calculer la latitude et la longitude avec une grande précision.

3. Ajouter une colonne

Terminal


$ rails g migration AddColumnsToUsers address:string latitude:float longitude:float

add_columns_to_users.rb


class AddColumnsToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :address, :string
    add_column :users, :latitude, :float
    add_column :users, :longitude, :float
  end
end

Terminal


$ rails db:migrate

4. Modifiez le modèle

user.rb


  #Postscript
  geocoded_by :address
  after_validation :geocode

geocoded_by :address ➡︎ Calculez la latitude et la longitude en fonction de la colonne d'adresse.

after_validation :geocode ➡︎ Modifiez la latitude et la longitude lors du changement d'adresse.

5. Modifiez le contrôleur

** ① Editez ʻapplication_controller.rb` **

Ajoutez "adresse" au paramètre fort.

application_controller.rb


def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :name, :address])
end

** ② Editez ʻusers_controller.rb` **

users_controller.rb


def show
  @user = User.find(params[:id])
  gon.user = @user #Postscript
end

6. Modifier la vue

** ① Modifier ʻapplication.html.slim` **

Chargez gon. Veuillez noter qu'il est chargé avant CSS et JavaScript.

slim:application.html.slim


doctype html
html
  head
    title
      | Bookers2
    = csrf_meta_tags
    = csp_meta_tag
    = include_gon #Postscript
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

** ② Ajoutez un formulaire de saisie d'adresse à l'écran d'inscription du nouveau membre **

slim:resistrations/new.html.slim


= f.label :address, 'adresse de rue'
br
= f.text_field :address, class: 'form-control'
br

** ③ Modifier la carte **

slim:users/show.html.erb


#map style='height: 500px; width: 500px;'

- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src=google_api }

javascript:

  let map;

  function initMap() {
    geocoder = new google.maps.Geocoder()

    map = new google.maps.Map(document.getElementById('map'), {
      //Appelez la latitude et la longitude à partir des variables définies dans le contrôleur et affichez-les au centre de la carte
      center: {
        lat: gon.user.latitude,
        lng: gon.user.longitude
      },
      zoom: 12,
    });

    marker = new google.maps.Marker({
      //Appeler la latitude et la longitude à partir des variables définies dans le contrôleur et définir des marqueurs
      position: {
        lat: gon.user.latitude,
        lng: gon.user.longitude
      },
      map: map
    });
  }

Mise en garde

Si vous ne désactivez pas turbolinks, la carte ne changera pas, alors assurez-vous de la désactiver.

Comment désactiver les turbolinks

Recommended Posts

[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
Comment afficher la carte à l'aide de l'API Google Map (Android)
[Rails] google maps api Comment publier et afficher des informations cartographiques
[Rails] Comment afficher Google Map
[Rails] Comment afficher plusieurs marqueurs sur Google Map et afficher une bulle lorsque vous cliquez dessus
[Ruby on Rails] Affichage et épinglage de GoolgeMAP à l'aide de l'API Google
Afficher l'API Google Maps avec Rails et affichage des broches
Comment analyser avec Google Colaboratory à l'aide de l'API Kaggle
Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map
Présentation de l'API Google Map avec rails
Essayez d'afficher la carte google et la carte géographique avec python
[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!
[Rails] Description de l'API Google Maps lorsque la latitude et la longitude ne peuvent pas être enregistrées
[Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte
Comment utiliser OAuth et API de compte de service avec le client API Google pour python
[Pour les débutants] Comment afficher des cartes et des champs de recherche à l'aide de l'API Javascript GoogleMap
[Rails] Comment obtenir des informations de localisation à l'aide de l'API de géolocalisation
Enregistrement facile des livres avec l'API et Rails de Google Livres
YOLP: extraire la latitude et la longitude avec l'API Yahoo! Geocoder.
Comment obtenir les données météorologiques actuelles et les afficher sur l'interface graphique tout en la mettant à jour automatiquement
[Ruby on Rails] Google map plusieurs broches, bulles, liens
[Google Colab] Comment interrompre l'apprentissage, puis le reprendre
[Ev3dev] Comment afficher une image bmp sur un écran LCD avec python
Comment retourner les données contenues dans le modèle django au format json et les mapper sur le dépliant
Comment installer OpenCV sur Cloud9 et l'exécuter en Python
Comment afficher des formules en latex lors de l'utilisation de Sympy (> = 1.4) dans Google Colaboratory
Obtenez des conversions et des revenus avec l'API Google Analytics et faites un rapport à Slack
Comment obtenir des abonnés et des abonnés de Python à l'aide de l'API Mastodon
IME On / Off est affiché par LED en coopération avec Python et Arduino
Comment exécuter Jupyter et Spark sur Mac avec des paramètres minimaux
Comment installer des pandas sur EC2 (Comment gérer MemoryError et PermissionError)
Comment afficher la résolution PDF et des informations détaillées sur Linux (pdfinfo)
Prenez une image avec Pepper et affichez-la sur votre tablette
Télécharger le logo Google → Texte avec OCR → Affichage sur HTML
[Google Maps API] La carte n'est pas affichée et devient vide [Rails]
J'ai créé un robot musical en utilisant discord.py et l'API Google Drive (testé avec Docker → déployé sur Heroku)
Pour le moment en utilisant FastAPI, je veux montrer comment utiliser l'API comme ça dans swagger