[Rails 6] Betten Sie Google Map in die App ein und fügen Sie der eingegebenen Adresse einen Marker hinzu. [Bestätigung der Details]

Die Google Map-API sollte einfach zu implementieren sein, aber ich bin süchtig nach vielen Sümpfen, daher werde ich genau darauf achten.

Umgebung

Rails 6.0.0 Ruby 2.6.5 EC2 Amazon Linux2 Nginx mariaDB Capistrano

Funktion

Geben Sie Ihre Adresse ein! (48b7ab460e405caaf463dd4963cd52af.png) Die Adresse wird in der Datenbank gespeichert, Breiten- und Längengrade werden automatisch berechnet

Es zeigt.

Google Map in App einbetten

<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_saf-utn- DEV_c-CRE_320617583922-ADGP_Hybrid% 20% 7C% 20AW% 20SEM% 20% 7C% 20BKWS% 20 ~% 20Google% 20Maps% 20API% 20BMM-KWID_43700039913979172-kwd-31368718959_l -ST_% 2Bgoogle% 20% 2Bmap% 20% 2Bapi & gclid = CjwKCAjwlbr8BRA0EiwAnt4MThq955XhyzUb7M1GK-21Aiqd5XdDq1JGzLDPjnyvFrBJ-dxCQAyDv "

Die Google Map-API ist einer der Dienste von Google Cloud und wird über eine Konsole namens Google Cloud Platform betrieben. Rufen Sie dort zunächst den API-Schlüssel der Google Map-Javascript-API ab.

Zur Google Cloud Platform

☆ Wenn Sie kein Google-Konto haben, registrieren Sie sich bitte zuerst hier. Registrierung des Google-Kontos Nachdem Sie ein Konto erstellt haben (falls vorhanden), rufen Sie die Konsole auf https://console.cloud.google.com/

Erstellen Sie ein Projekt und erhalten Sie API-Schlüssel → Kartenanzeige

https://qiita.com/nagaseToya/items/e49977efb686ed05eadb Der Ablauf ist hier leicht verständlich geschrieben.

Dieses Mal werden zusätzlich alle Adressaufzeichnungen, Speicherungen und Ausgaben ausgeführt.

Geocording Es ist eine Funktion, die den Breiten- und Längengrad berechnet und eine bestimmte Position findet. Wir verwenden den Geocoder von gem und den Geocoding API-Service von Google Cloud. Sie können die Standortinformationen nur mit gem erhalten, aber Sie können sie an der "Tokyo Station" erhalten, aber Sie können sie nicht an der spezifischen Adresse "○○○○ ー ◯◯" in 〇〇-ku, Tokio erhalten. Sie können oder können nicht in der Lage sein, es zu bekommen. Daher werden wir auch die Verwendung der leistungsstärkeren Geokodierungs-API ermöglichen.

Code

Angenommen, das Modell wurde erstellt. (Beispiel Performances Modell)

① Migrationsdatei erstellen (Spalte hinzufügen)

% rails g migration AddColumnsToPerformances

-Eingabe Adressadressenspalte ・ Breiten- und Längengradspalten werden automatisch per Geocode berechnet

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

Sie können die Spalte mit Rollback ändern, aber die Daten gehen verloren. Ich denke, es ist besser, so viel wie möglich add_column (Spalte hinzufügen) hinzuzufügen!

② Eingabeformular erstellen

Sie können nur die Adresse speichern.

<%= form_with(model: @performance, local: true) do |f| %>
***Auszug***
<label for="group-name">Adresse(Google Map-Anzeige)</label>
<span class="indispensable-any">Irgendein</span>
<%= f.text_area :address,class:"new-performance-box", id:"gmap", placeholder:"Kopieren Sie die Google Map-Adresse und fügen Sie sie ein" %>  
***Auszug***

③ Controller

Geben Sie die Adresse mit dem Parameter strong an.

performances_controller.erb

before_action :set_performance, only: [:Ansicht zum Anzeigen]

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

def Ansicht zum Anzeigen
    @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

④ Anzeigen

CSS wird separat beschrieben. zoomControl: false, mapTypeControl: false, fullscreenControl: false, treetViewControl: false, Ist eine Kartenanzeigeoption, die die Zoomtaste usw. ausschaltet.

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

* Bitte achten Sie auf die Notation von key = <% = ENV ['GOOGLE_MAP_API']%>! Hier ist nur die Position von = unterschiedlich, aber alles wird nicht funktionieren ... </ 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, Tokio")
=> [35.6591376, 139.7007901]

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

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