[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. ** **

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

• Implémentation de la fonction de connexion ・ Affichage de Google Map

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"

3. Cliquez sur "Bibliothèque"

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

5. Cliquez sur "Activer"

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

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

8. Cliquez sur "Credentials"

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

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 **

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.

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