[JAVA] [Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte

introduction

Quoi faire

C'est une carte qui recherche la latitude et la longitude à partir de l'adresse affichée ou du nom de lieu comme celui-ci et place des marqueurs à chaque point. (Vous pouvez également publier une adresse comme "1-1-2 Oshiage, Sumida-ku, Tokyo" (Sky Tree))

Choses à préparer

Connaissances préalables

Cette fois, nous continuerons en supposant que la carte peut être affichée à l'aide de l'API Google Map. Si vous ne comprenez pas comment afficher une carte à l'aide de GoogleMapAPI, veuillez lire l'article suivant. [[Rails 6 / Google Map API] Pour les débutants! Introduction facile de l'API Google Map avec Ruby on Rails](https://qiita.com/nagaseToya/items/e49977efb6 86ed05eadb "À propos de l'affichage de la carte")

une fonction

Veuillez préparer une fonction de publication simple. J'ai créé une table de cartes avec une colonne d'adresse pour publier les adresses et les noms de lieux. C'est comme ça!

couler

1. Ajoutez des colonnes de latitude et de longitude au tableau des cartes pour stocker la latitude et la longitude.
2. Utilisez Geocoder pour obtenir la latitude et la longitude à partir de l'adresse ou du nom de lieu saisi et enregistrez chacun dans les colonnes de latitude et de longueur.
3. Placez un marqueur au point de latitude / longitude affiché.

la mise en oeuvre

Nous allons l'implémenter selon le flux ci-dessus!

1. Ajouter une colonne

$ rails g migration AddCoordinateToMaps latitude:float longitude:float

Créez un fichier de migration pour ajouter des colonnes avec la commande ci-dessus.

$ rails db:migrate

N'oubliez pas de migrer!

2. Obtenez la latitude / longitude à l'aide du géocodeur

Geocoding ――Q. Qu'est-ce que le géocodage en premier lieu? ??

• A. Obtenir des coordonnées (latitude / longitude) à partir d'adresses et de noms de lieux, et obtenir des adresses et des noms de lieux à partir de coordonnées. Vous pouvez également obtenir l'adresse et le nom du lieu à partir de l'adresse IP.

En passant, l'article suivant a écrit en détail sur le géocodage, donc si vous voulez en savoir plus, jetez un œil. Rails Geocoder and Play

Installez les gemmes requises

gem 'geocoder'

Écrivez le code ci-dessus dans le fichier gem.

$ bundle install

Faisons "bundle install" fermement ~! Vous pouvez maintenant utiliser le géocodeur dans les rails.

Géocodage pour le modèle

map.rb

class Map < ApplicationRecord
    geocoded_by :address
    after_validation :geocode
end

Dans la partie : adresse, écrivez la colonne que vous souhaitez effectuer le géocodage. Si vous décrivez ces deux lignes pour un modèle avec ʻaddress, latitude et longitude, vous pouvez obtenir la latitude et la longitude à partir de l'adresse et du nom de lieu saisis dans ʻaddress et les enregistrer dans chaque colonne. Le fera.

Et si vous affichez «latitude» et «longitude» sur l'écran de liste, la latitude et la longitude seront affichées comme indiqué ci-dessous.

Cependant, si vous publiez une adresse telle que "1-1-2 Oshiage, Sumida-ku, Tokyo" telle quelle, vous ne pourrez pas obtenir la latitude et la longitude.

Créer un fichier de configuration pour le géocodeur

Créez un fichier de configuration avec la commande suivante.

$ rails g geocoder:config

Un fichier de configuration appelé config / initializers / geocoder.rb sera généré, décrivez donc les informations API de googlemap dans ce fichier.

ruby:config.initializers.geocoder.rb

Geocoder.configure(
  # Geocoding options
  timeout: 5,                 # geocoding service timeout (secs)
  lookup: :google,         # name of geocoding service (symbol)
  api_key: 'YOUR_API_KEY',               # API key for geocoding service
  units: :km,                 # :km for kilometers or :mi for miles
)

Décommentez les quatre éléments timeout, lookup, ʻapi_key et ʻunits dans le geocoder.rb généré, et remplissez les éléments requis comme indiqué dans le code ci-dessus.

En faisant cela, le géocodeur pourra obtenir des adresses même très détaillées.

3. Afficher un marqueur à la position affichée

index.html.erb

<div id='map'></div>

<script>
  let map

    function initMap(){
      geocoder = new google.maps.Geocoder()

      map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.68123620000001, lng:139.7671248},
          zoom: 12,
      });


      <% @maps.each do |m| %>
          (function(){
          var contentString = "Adresse de rue:<%= m.address %>"; 

          var marker = new google.maps.Marker({
              position:{lat: <%= m.latitude %>, lng: <%= m.longitude %>},
              map: map,
              title: contentString
          });

          })();
      <% end %>
      }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Comme le code ci-dessus<% @maps.each do |m| %> ~ <% end %>Si vous écrivez le code que vous souhaitez répéter dans la case, un marqueur apparaîtra à la position de l'adresse affichée ou du nom du lieu.

• Bien que l'adresse soit attribuée à contentString, il est pratique d'attribuer les informations susceptibles d'être utilisées plusieurs fois à la variable. (Il peut être utilisé lors de la mise en œuvre supplémentaire d'un ballon, etc.)

Article de référence

• Rails Geocoder and Play
• [[Rails 6 / Google Map API] Pour les débutants! Introduction facile de l'API Google Map avec Ruby on Rails](https://qiita.com/nagaseToya/items/e49977efb6 86ed05eadb "À propos de l'affichage de la carte")
• [Afficher plusieurs marqueurs à l'aide de l'API Google Maps dans Rails 5](https://qiita.com/yamaotoko4177/items/30b72766d013904452fa 86ed05eadb "À propos de l'affichage de la carte")
• Comment obtenir la latitude / longitude d'une adresse avec Ruby on Rails et Google Geocoding API 86ed05eadb "À propos de l'affichage de la carte")