[Rails] google maps api So posten und anzeigen Sie einschließlich Karteninformationen

Einführung

・ Ordnet die JavaScript-API zu ・ Geokodierungs-API

Mit der oben genannten API habe ich den Prozess des Posten und Anzeigens eines Posts mit einer Karte bei der Erstellung einer persönlichen Anwendung implementiert. Ich war ziemlich süchtig danach, mich auf verschiedene Artikel zu beziehen, also werde ich es zusammenfassen.

Nachtrag [Rails] Beschreibung der Google Maps-API, wenn Breiten- und Längengrade nicht gespeichert werden können Ich konnte den Spielraum und die Milde nicht gut erfassen. Wenn Sie also eine ähnliche Person haben, lesen Sie bitte auch diesen Artikel.

Implementierungsdetails / Bildfoto

  1. Bitten Sie den Benutzer, den Ortsnamen oder die Adresse einzugeben

  2. Legen Sie die Markierung auf der Google-Karte auf der Detailseite ab und zeigen Sie sie an.

Zum Zeitpunkt der Veröffentlichung

投稿.png

Detailseite

投稿表示.png

Google API Sie müssen die API erhalten, wenn Sie googlemap verwenden. Holen Sie sich den API-Schlüssel über den unten stehenden Link. Google Maps Platform Ich werde diesmal die Erfassungsmethode weglassen.

In der diesmal erstellten App ・ Ordnet die JavaScript-API zu ・ Geokodierungs-API Wird verwendet, also bitte aktivieren.

Datenbankerstellung

Erstellen Sie zunächst eine Datenbank. Wenn Sie es bereits erstellt haben, fügen Sie eine Spalte hinzu.

Posttisch

Column Type Options
title string null: false
text text null: false

Association

has_one :spot

Spot Tisch

Column Type Options
address string null: false
latitude float null: false
longitude float null: false
review_id references foreign_key: true, null: false

Association

belongs_to :post

Edelsteininstallation

Gemfile


gem "gmaps4rails"
gem "geocoder"
gem "gon"
gem "dotenv-rails"

Wenn Sie es in der Gemfile beschreiben können, führen Sie die Bundle-Installation durch.

Von oben ・ Gem "gmaps4rails", mit dem Sie ganz einfach Google Maps erstellen können ・ Edelstein "Geocoder", der Ortsnamen in Breiten- und Längengrade umwandeln kann -Gem "gon", mit dem JS Controller-Variablen verwenden kann ・ Gem "dotenv-Rails", um den Schlüssel der GoogleMap-API zu verbergen

JS eingeführt

Bearbeiten Sie application.html.haml

ruby:application.html.haml


!!!
%html
  %head
   .
   .
   .
    = include_gon
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield
    %script{src: "https://maps.googleapis.com/maps/api/js?key=#{ENV["GOOGLE_MAP_KEY"]}&callback=initMap"}
    %script{src: "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}
    %script{src: "//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js", type:"text/javascript"}

Beschreibe in% head, damit der Edelstein "gon" verwendet werden kann.

Es gibt eine Beschreibung für die Verwendung von JS in% body. Ich denke, es gibt eine Möglichkeit, es in% head zu schreiben, aber diesmal habe ich es in% body geschrieben.

ENV ["GOOGLE_MAP_KEY"] enthält den API-SCHLÜSSEL, der in der ENV-Datei versteckt ist.

.env


GOOGLE_MAP_KEY = "Bitte beschreiben Sie den erworbenen API-SCHLÜSSEL"

Erstellen Sie eine .env-Datei, um die oben genannten zu beschreiben.

Erstellen Sie underscore.js

Erstellen Sie underscore.js unter app / assets / javascripts und kopieren Sie den unten verlinkten Code und fügen Sie ihn ein.

underscore.js

Bearbeiten Sie application.js

Bearbeiten Sie application.js.

application.js


//= require underscore
//= require gmaps/google

Modell bearbeiten

Bearbeiten Sie anschließend jedes Modell wie folgt.

post.rb


class Post < ApplicationRecord
  has_one :spot, dependent: :destroy
  accepts_nested_attributes_for :spot
end

spot.rb


class Spot < ApplicationRecord
  belongs_to :post
  
  geocoded_by :address
  after_validation :geocode
end

Ansicht bearbeiten

Erstellen Sie eine Beitragsseite. Der Beitrag der Googlemap und die Beschreibung der Anzeige.

Erstellen Sie ein Formular, um den Namen der Adresse oder des Ortes einzugeben.

ruby:new.html.haml


= form_with(model: @post, local: true, multipart: true) do |f|
  .spot
    = f.fields_for :spot do |s|
      = s.label :address, "Überprüfen Sie den Standort(Suche auf Google Map)", class: 'spot__title'
      = s.text_field :address, placeholder: "Geben Sie einen Punkt ein", id: "address", class: 'spot__text'
    %input{onclick: "codeAddress()", type: "button", value: "Suchen nach"}
    .map{id: "map", style: "height: 320px; width: 640px;"}

Beschreiben Sie als Nächstes den Google Map-Teil der veröffentlichten Detailseite.

ruby:show.html.haml


.show
  .show__address
    = @post.spot.address
  .show__maps{id: "show_map", style: "height: 320px; width: 400px;"}

Controller bearbeiten

Bearbeiten Sie den Controller.

post.controller


def new
  @post = Review.new
  @post.build_spot
end

def create
  @review = Review.new(review_params)
  if @post.save
    redirect_to root_path
  else
    redirect_to new_review_path
  end
end

def show
  @post = Review.find(params[:id])
  @lat = @review.spot.latitude
  @lng = @review.spot.longitude
  gon.lat = @lat
  gon.lng = @lng
end

private

def review_params
  params.require(:post).permit(:title, :text,spot_attributes: [:address])
end

Da es has_one in der .build-Methode der neuen Aktion entspricht @post.build_spot Es wird gesagt.

Beschrieben in Show Action

@lat = @review.spot.latitude @lng = @review.spot.longitude gon.lat = @lat gon.lng = @lng

Daher werden die in der Steuerung definierten Variablen "@ lat" und "@ lng" "gon.lat" bzw. "gon.lng" zugewiesen, damit sie von JavaScript verarbeitet werden können.

JavaScript erstellen

Als nächstes erstellen wir eine JavaScript-Datei.

Erstellen Sie googlemap.js in Asset / Javascripts /.

googlemap.js


let map //Variablendefinition
let geocoder //Variablendefinition

function initMap(){ //Rückruffunktion
  geocoder = new google.maps.Geocoder() //Greifen Sie auf den GoogleMapsAPI-Geokodierungsdienst zu
  if(document.getElementById('map')){ //'map'Ausführen, wenn Sie die ID erhalten können
    map = new google.maps.Map(document.getElementById('map'), { //'map'Holen Sie sich die ID und zeigen Sie die Karte an
      center: {lat: 35.6594666, lng: 139.7005536}, //Der Ort, an dem zuerst angezeigt werden soll (diesmal ist "Shibuya-Scramble-Kreuzung" der Anfangswert).
      zoom: 15, //Vergrößerungsrate (kann von 1 bis 21 eingestellt werden)
    });
  }else{ //'map'Wenn es keine ID gibt
    map = new google.maps.Map(document.getElementById('show_map'), { //'show_map'Holen Sie sich die ID und zeigen Sie die Karte an
      center: {lat: gon.lat, lng: gon.lng}, //Verwenden Sie die vom Controller definierte Variable als Breiten- / Längengradwert (der Wert befindet sich in der DB).
      zoom: 15, //Vergrößerungsrate (kann von 1 bis 21 eingestellt werden)
    });

    marker = new google.maps.Marker({ //Setzen Sie einen Marker auf Google Map
      position:  {lat: gon.lat, lng: gon.lng}, //Entscheiden Sie, wo der Marker abgelegt werden soll (Wert befindet sich in der Datenbank)
      map: map //Geben Sie die Karte an, auf der die Markierung abgelegt werden soll
    });
  }
}

function codeAddress(){ //Rückruffunktion
  let inputAddress = document.getElementById('address').value; //'address'Holen Sie sich den ID-Wert (Wert)

  geocoder.geocode( { 'address': inputAddress}, function(results, status) { //Übergeben Sie die Adresse, die Sie geocodieren möchten, als Argument
    if (status == 'OK') {
      let lat = results[0].geometry.location.lat(); //Breitengrad des geokodierten Ergebnisses
      let lng = results[0].geometry.location.lng(); //Geokodierte Ergebnislänge
      let mark = {
          lat: lat, //Breite
          lng: lng  //Längengrad
      };
      map.setCenter(results[0].geometry.location); //Breite / Länge des nächstgelegenen Ortes, an dem Sie eine lesbare Adresse erhalten möchten
      let marker = new google.maps.Marker({
          map: map, //Geben Sie die Karte an, auf der die Markierung abgelegt werden soll
          position: results[0].geometry.location //Entscheiden Sie, wo der Marker abgelegt werden soll
      });
    } else {
      alert('Es gab kein entsprechendes Ergebnis');
    }
  });   
}

Die obige Beschreibung finden Sie unter https://qiita.com/kanato4/items/f2f3f7accd880224616a Ich durfte mich beziehen.

Am Ende

Das ist es! Ich habe viel Zeit allein für diesen Teil aufgewendet, als ich zum ersten Mal eine Anwendung mit der Google-API erstellt habe. Ich hoffe, dass dies für spätere Wissenschaftler hilfreich sein wird.

Recommended Posts

[Rails] google maps api So posten und anzeigen Sie einschließlich Karteninformationen
[Rails] So zeigen Sie Google Map an
So zeigen Sie eine Karte mit der Google Map API (Android) an
Zeigen Sie die Google Maps-API mit Rails und Pin-Anzeige an
[Schienen] So zeigen Sie mehrere Markierungen auf Google Map an und zeigen beim Klicken eine Sprechblase an
[Rails] So berechnen Sie Breiten- und Längengrade mit hoher Genauigkeit mithilfe der Geocoding-API und zeigen sie auf Google Map an
[Google Maps API] Karte wird nicht angezeigt und wird leer [Rails]
Versuchen Sie, Google Map und Geography Map mit Python anzuzeigen
[Rails 6 / Google Map API] Veröffentlichen Sie eine Adresse und setzen Sie mehrere Markierungen auf der Karte
[Rails] So erhalten Sie Standortinformationen mithilfe der Geolocation-API
[Für Anfänger] Anzeigen von Karten und Suchfeldern mithilfe der GoogleMap Javascript-API
So verbergen Sie den Google Maps-API-Schlüssel vor HTML
Anfänger der Google Maps API und der Twitter API haben "Tweet Map" erstellt.
Einführung der Google Map API mit Schienen
So zeigen Sie PDF-Auflösung und detaillierte Informationen unter Linux an (pdfinfo)
[Ruby on Rails] Anzeigen und Fixieren von GoolgeMAP mithilfe der Google-API
[Kartenanzeige] Zeigen Sie eine Karte anhand der vom Benutzer registrierten Adresse mit der JavaScript-API und der Geokodierungs-API von Google Maps an!
[Rails] Einführung in Google Analytics [Easy]
[Rails] Google Maps API Beschreibung, wenn Breiten- und Längengrade nicht gespeichert werden können
[Schienen] Anzeigen von Google Maps mithilfe der Google Maps-API und Suchen von Routen zwischen mehreren Punkten
Verwendung der Google Cloud Translation API
Verwendung von OAuth und API für Dienstkonten mit Google API Client für Python
So zeigen Sie Videos in Google Colab inline an
Einfache Buchregistrierung mit Google Books API und Rails
[Python] So erstellen Sie eine Korrelationsmatrix und eine Heatmap
Analysieren mit Google Colaboratory mithilfe der Kaggle-API
So veröffentlichen Sie ein Ticket über die Shogun-API
[Super einfach! ] So zeigen Sie den Inhalt von Wörterbüchern und Listen einschließlich Japanisch in Python an
[Ruby on Rails] Google Map mehrere Pins, Sprechblasen, Links
[Django] Google-Kartenanzeige von GIS-Daten und grafische Darstellung von Parametern
[Google Colab] So unterbrechen Sie das Lernen und setzen es dann fort
Zeigen Sie die mit Rails gem'geocoder 'eingegebene Adresse in Google Map an
Erstellen Sie ein Modell zum Speichern von Informationen aus der Google Books-API für eine intuitive Handhabung und Prüfung
So verwenden Sie Google Colaboratory
So aktualisieren Sie die App Store-Beschreibung in Google Spreadsheets und Fastlane automatisch
So zeigen Sie Formeln in Latex an, wenn Sie sympy (> = 1.4) in Google Colaboratory verwenden
Erhalten Sie Conversions und Einnahmen mit der Google Analytics-API und melden Sie sich bei Slack
So erhalten Sie mithilfe der Mastodon-API Follower und Follower von Python
Verwendung von Google Colaboratory und Verwendungsbeispiel (PyTorch × DCGAN)
So zeigen Sie Bytes in Java und Python auf die gleiche Weise an
[Rails 6] Betten Sie Google Map in die App ein und fügen Sie der eingegebenen Adresse einen Marker hinzu. [Bestätigung der Details]