[Rails] google maps api Comment publier et afficher des informations cartographiques

introduction

・ API JavaScript Maps ・ API de géocodage

À l'aide de l'API ci-dessus, j'ai implémenté le processus de publication et d'affichage d'un article comprenant une carte dans la production d'une application personnelle. J'étais assez accro à faire référence à divers articles, je vais donc le résumer.

• Les fonctions d'affichage autres que les cartes sont résumées comme étant terminées.

Postscript [Rails] Description de l'API Google Maps lorsque la latitude et la longitude ne peuvent pas être enregistrées Je n'ai pas pu bien comprendre la latitude et la douceur, donc si vous avez une personne similaire, veuillez également vous référer à cet article.

Détails de mise en œuvre / photo d'image

1. Demandez à l'utilisateur de saisir le nom ou l'adresse du lieu

2. Déposez le marqueur sur la carte google sur la page de détails et affichez-le.

Au moment de la publication

• Veuillez noter que la partie avant est presque la même que celle par défaut.

Page de détails

Google API Vous devez obtenir l'API lorsque vous utilisez googlemap. Obtenez la clé API à partir du lien ci-dessous. Google Maps Platform J'omettrai cette fois la méthode d'acquisition.

Dans l'application créée cette fois ・ API JavaScript Maps ・ API de géocodage Sera utilisé, veuillez donc l'activer.

Création de base de données

Commencez par créer une base de données. Si vous l'avez déjà créé, ajoutez une colonne.

table de poteau

Association

has_one :spot

table spot

Association

belongs_to :post

installation de gemmes

Gemfile

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

Si vous pouvez le décrire dans le Gemfile, effectuez l'installation groupée.

D'en haut ・ Gem "gmaps4rails" qui facilite la création de Google Maps ・ Gem "géocodeur" qui peut convertir le nom de lieu en latitude et longitude -Gem "gon" qui permet à JS d'utiliser des variables de contrôleur ・ Gem "dotenv-rails" pour masquer la clé de l'API GoogleMap

Présentation de JS

Modifier 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"}

Décrivez en% head pour que la gemme "gon" puisse être utilisée.

Il existe une description de l'utilisation de JS dans% body. Je pense qu'il y a un moyen de l'écrire en% head, mais cette fois je l'ai écrit en% body.

ENV ["GOOGLE_MAP_KEY"] contient la clé API cachée dans le fichier .env.

.env

GOOGLE_MAP_KEY = "Veuillez décrire la clé API acquise"

Créez un fichier .env pour décrire ce qui précède.

Créer un underscore.js

Créez un underscore.js sous app / assets / javascripts et copiez et collez le code lié ci-dessous.

underscore.js

Modifier application.js

Modifiez application.js.

application.js

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

Modifier le modèle

Ensuite, modifiez chaque modèle comme suit.

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

Modifier vue

Créez une page de publication. Le post de googlemap et la description de l'affichage.

Créez un formulaire pour saisir le nom de l'adresse ou du lieu.

ruby:new.html.haml

= form_with(model: @post, local: true, multipart: true) do |f|
  .spot
    = f.fields_for :spot do |s|
      = s.label :address, "Revoir l'emplacement(Rechercher sur Google Map)", class: 'spot__title'
      = s.text_field :address, placeholder: "Entrez un endroit", id: "address", class: 'spot__text'
    %input{onclick: "codeAddress()", type: "button", value: "Rechercher"}
    .map{id: "map", style: "height: 320px; width: 640px;"}

Ensuite, décrivez la partie google map de la page de détails publiée.

ruby:show.html.haml

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

Contrôleur d'édition

Modifiez le contrôleur.

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

Puisqu'il correspond à has_one dans la méthode .build de la nouvelle action @post.build_spot C'est dit.

Décrit dans l'action show

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

Ainsi, les variables @ lat et @ lng définies dans le contrôleur sont affectées respectivement à gon.lat et gon.lng, de sorte qu'elles puissent être gérées par JavaScript.

Créer du JavaScript

Ensuite, nous allons créer un fichier JavaScript.

Créez googlemap.js dans asset / javascripts /.

googlemap.js

let map //Définition variable
let geocoder //Définition variable

function initMap(){ //Fonction de rappel
  geocoder = new google.maps.Geocoder() //Accéder au service de géocodage GoogleMapsAPI
  if(document.getElementById('map')){ //'map'Exécutez si vous pouvez obtenir l'identifiant
    map = new google.maps.Map(document.getElementById('map'), { //'map'Obtenez l'identifiant et affichez la carte
      center: {lat: 35.6594666, lng: 139.7005536}, //Le premier endroit à afficher (cette fois, "Shibuya scramble intersection" est la valeur initiale)
      zoom: 15, //Taux d'agrandissement (peut être réglé de 1 à 21)
    });
  }else{ //'map'S'il n'y a pas d'identifiant
    map = new google.maps.Map(document.getElementById('show_map'), { //'show_map'Obtenez l'identifiant et affichez la carte
      center: {lat: gon.lat, lng: gon.lng}, //Utilisez la variable définie par le contrôleur comme valeur de latitude / longitude (la valeur est dans le DB)
      zoom: 15, //Taux d'agrandissement (peut être réglé de 1 à 21)
    });

    marker = new google.maps.Marker({ //Déposer un marqueur sur Google Map
      position:  {lat: gon.lat, lng: gon.lng}, //Décidez où déposer le marqueur (la valeur est dans le DB)
      map: map //Spécifiez la carte pour déposer le marqueur
    });
  }
}

function codeAddress(){ //Fonction de rappel
  let inputAddress = document.getElementById('address').value; //'address'Obtenez la valeur de l'id (valeur)

  geocoder.geocode( { 'address': inputAddress}, function(results, status) { //Passez l'adresse que vous souhaitez géocoder en argument
    if (status == 'OK') {
      let lat = results[0].geometry.location.lat(); //Latitude des résultats géocodés
      let lng = results[0].geometry.location.lng(); //Longitude du résultat géocodée
      let mark = {
          lat: lat, //latitude
          lng: lng  //longitude
      };
      map.setCenter(results[0].geometry.location); //Latitude / longitude de l'endroit le plus proche où vous souhaitez obtenir une adresse lisible
      let marker = new google.maps.Marker({
          map: map, //Spécifiez la carte pour déposer le marqueur
          position: results[0].geometry.location //Décidez où déposer le marqueur
      });
    } else {
      alert('Il n'y a pas eu de résultat correspondant');
    }
  });   
}

Pour la description ci-dessus, voir https://qiita.com/kanato4/items/f2f3f7accd880224616a J'ai été autorisé à faire référence.

À la fin

C'est tout! J'ai passé un temps considérable à créer une application utilisant l'API google pour la première fois, j'espère donc que cela sera utile pour les futurs chercheurs.