[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)) スクリーンショット 2020-08-28 1.54.39.png

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. スクリーンショット 2020-08-29 16.41.46.png 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? ??

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.

スクリーンショット 2020-08-29 18.15.22.png

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.

Article de référence

Recommended Posts

[Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte
Afficher plusieurs marqueurs sur Google Map
[Ruby on Rails] Google map plusieurs broches, bulles, liens
Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map
[Rails] google maps api Comment publier et afficher des informations cartographiques
Présentation de l'API Google Map avec rails
Accordez un jeton d'accès avec la commande curl et POST l'API
[Google Maps API] La carte n'est pas affichée et devient vide [Rails]
[Ruby on Rails] Affichage et épinglage de GoolgeMAP à l'aide de l'API Google
[Affichage de la carte] Affichez une carte à partir de l'adresse enregistrée par l'utilisateur à l'aide de l'API JavaScript de Google Maps et de l'API de géocodage!
[Rails 6] Intégrez Google Map dans l'application et ajoutez un marqueur à l'adresse saisie. [Confirmation des détails]
[Rails] Affichage de Google Maps à l'aide de l'API Google Maps et recherche d'itinéraires entre plusieurs points
[Rails] Comment calculer la latitude et la longitude avec une grande précision à l'aide de l'API Geocoding et l'afficher sur Google Map
Afficher l'API Google Maps avec Rails et affichage des broches
Google Drive API Set File Permission (Définir les autorisations sur les fichiers Google Drive)
Enregistrement facile des livres avec l'API et Rails de Google Livres
Publiez sur votre compte en utilisant l'API sur Twitter
Les débutants de l'API Google Maps et de l'API Twitter ont créé "Tweet Map"