[Rails 6] Intégrez Google Map dans l'application et ajoutez un marqueur à l'adresse saisie. [Confirmation des détails]

L'API Google Map devrait être facile à mettre en œuvre, mais je suis accro à de nombreux marais, donc je vais y porter une attention particulière.

environnement

Rails 6.0.0 Ruby 2.6.5 EC2 Amazon Linux2 Nginx mariaDB Capistrano

une fonction

Entrez votre adresse48b7ab460e405caaf463dd4963cd52af.png L'adresse est enregistrée dans DB, la latitude et la longitude sont calculées automatiquement f57e6c8b1a108791d56e024334075861.png

Ça montre. d801305aebecc331b0cfd2a2bb7970d2.jpg

Intégrer Google Map dans l'application

<a href = "https://cloud.google.com/maps-platform/?hl=ja&utm_source=google&utm_medium=cpc&utm_campaign=FY18-Q2-global-demandgen-paidsearchonnetworkhouseads-cs-maps_contactsal_safnentone&utm_conttext-text- DEV_c-CRE_320617583922-ADGP_Hybrid% 20% 7C% 20AW% 20SEM% 20% 7C% 20BKWS% 20 ~% 20Google% 20Maps% 20API% 20BMM-KWID_43700039913979172-kwd-313687189577-userloc% B304_100_100% -ST_% 2Bgoogle% 20% 2Bmap% 20% 2Bapi & gclid = CjwKCAjwlbr8BRA0EiwAnt4MThq955XhyzUb7M1GK-21Aiqd5XdDq1JGzLDPjnyvFrBJ-dxCQAyDORo "Page Google"

L'API Google Map est l'un des services de Google Cloud et fonctionne à partir d'une console appelée Google Cloud Platform. Commencez par y récupérer la clé API de l'API javascript de Google Map.

Vers Google Cloud Platform

☆ Si vous n'avez pas de compte Google, veuillez d'abord vous inscrire ici. Enregistrement d'un compte Google Après avoir créé un compte (si vous en avez un), accédez à la console https://console.cloud.google.com/

Créer un projet et obtenir la clé API → Affichage de la carte

https://qiita.com/nagaseToya/items/e49977efb686ed05eadb Le flux est écrit ici d'une manière facile à comprendre.

Cette fois, en plus de cela, tout enregistrement d'adresse, sauvegarde et sortie sera effectué.

Geocording C'est une fonction qui calcule la latitude et la longitude et trouve une position spécifique. Nous utilisons le Geocoder de gem et le service d'API Geocoding de Google Cloud. Vous ne pouvez obtenir les informations de localisation qu'avec gem, mais vous pouvez les obtenir à la "Gare de Tokyo", mais vous ne pouvez pas les obtenir à l'adresse spécifique "○○○○ ー ◯◯" à 〇〇-ku, Tokyo. Vous pouvez ou non être en mesure de l'obtenir. Par conséquent, nous allons également permettre d'utiliser l'API Geocoding plus performante.

code

Supposons que le modèle a été créé. (Exemple de modèle de performances)

① Créer un fichier de migration (ajouter une colonne)

% rails g migration AddColumnsToPerformances

-Colonne d'adresse d'adresse saisie ・ Colonnes de latitude et de longitude calculées automatiquement par géocode

class AddColumnsToPerformances < ActiveRecord::Migration[6.0]
  def change
    add_column :performances, :address, :string
    add_column :performances, :latitude, :float
    add_column :performances, :longitude, :float
  end
end
% rails db:migrate

Vous pouvez changer la colonne avec un rollback, mais les données seront perdues, donc je pense qu'il vaut mieux ajouter_colonne (ajouter une colonne) autant que possible!

② Créer un formulaire de saisie

Vous ne pouvez enregistrer que l'adresse.

<%= form_with(model: @performance, local: true) do |f| %>
***Extrait***
<label for="group-name">adresse de rue(Affichage de Google Map)</label>
<span class="indispensable-any">Tout</span>
<%= f.text_area :address,class:"new-performance-box", id:"gmap", placeholder:"Copiez et collez l'adresse Google Map" %>  
***Extrait***

③ Contrôleur

Spécifiez l'adresse avec le paramètre strong.

performances_controller.erb


before_action :set_performance, only: [:Afficher à afficher]

def create
   @performance = Performance.new(performance_params)
   if @performance.valid?
     @performance.save
     redirect_to "/users/#{current_user.id}"
   else
     render :new
   end
end

vue def à afficher
    @performance = Performance.new(performance_params)
end

private

def set_performance
   @performance = Performance.find(params[:id])
end

def performance_params
 params.require(:performance).permit(:address).merge(user_id: current_user.id)
end

④ Voir

CSS est décrit séparément. zoomControl: false, mapTypeControl: false, fullscreenControl: false, treetViewControl: false, Est une option d'affichage de la carte qui désactive le bouton de zoom et ainsi de suite.

<div id='map'>
<script>
let map
function initMap(){
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: <%= @performance.latitude %>, lng: <%= @performance.longitude %>},
    zoom: 15,
       zoomControl: false,
       mapTypeControl: false,
       fullscreenControl: false,
       streetViewControl: false,
  });

  marker = new google.maps.Marker({
    position: {lat: <%= @performance.latitude %>, lng: <%= @performance.longitude %>},
    map: map
  });
   geocoder = new google.maps.Geocoder()
}
</script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API'] %>&callback=initMap" async defer></script>
</div>

* Veuillez faire attention à la notation de la clé = <% = ENV ['GOOGLE_MAP_API']%>! Ici, juste la position de = est différente, mais tout ne fonctionnera pas ... </ b>

⑤ Modèle

Geocord va maintenant calculer la latitude et la longitude et les enregistrer dans la colonne.

performance.rb


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

* Veuillez noter que cela peut ne pas fonctionner sans if :: address_changed?! Je devais écrire ceci </ b>

⑥ Description de l'utilisation de l'API Geocording

% rails generate geocoder:config

/config/initializes/geocoder.rb



Geocoder.configure(
  # Geocoding options
  # timeout: 5,                 # geocoding service timeout (secs)
  lookup: :google,         # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
  use_https: true,           # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:[email protected]:port)
  # https_proxy: nil,           # HTTPS proxy server (user:[email protected]:port)
  api_key: 'YOUR_API_KEY',               # API key for geocoding service
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],

  # Calculation options
  units: :km # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear
)

Choses à vérifier quand les choses tournent mal

・ Définition des variables d'environnement ・ Voir la description ・ Méthode modèle ・ Geocorder.rb

%rails c
[1] pry(main)> Geocoder.coordinates("〒150-0043 2-1-1 Dogenzaka, Shibuya-ku, Tokyo")
=> [35.6591376, 139.7007901]

Essayez de sortir tout en modifiant le contenu avec -Si le javascript de Google Map et la clé API de l'API de géocodage sont combinés, créez une autre API et essayez de les séparer. -Réglage des variables d'environnement dans l'environnement de production

[[email protected]〜〜〜〜〜〜〜]$ sudo vim /etc/environment

Quitter après le réglage des variables → redémarrer

[[email protected]〜〜〜〜〜〜〜]$ env | grep YOUR_API_KEY

Confirmer avec -Essayez de redémarrer depuis le serveur EC2 (je l'ai finalement confirmé dans l'environnement de production)

Recommended Posts