[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 adresse L'adresse est enregistrée dans DB, la latitude et la longitude sont calculées automatiquement

Ça montre.

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>

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

% rails generate geocoder:config

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:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host: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
)

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

[ec2-user@〜〜〜〜〜〜〜]$ sudo vim /etc/environment

[ec2-user@〜〜〜〜〜〜〜]$ env | grep YOUR_API_KEY