2 Créez un fichier .env <-Le plus important

Créez un fichier .env dans la même hiérarchie que Gemfile

.env

SECRET_KEY=Ma clé API
#Dans la partie à ajouter<%= ENV['SECRET_KEY'] %>Peut être utilisé en entrant)

Ajoutez ce qui suit au bas du fichier .gitignore.

.gitignore

/.env

<détails> <résumé> Important </ résumé> Si vous oubliez cette description et que vous la publiez sur Github, votre clé API sera publiée sur le net et elle pourra être abusée. Si vous oubliez de l'écrire et qu'il augmente, un e-mail d'avertissement sera envoyé à l'adresse e-mail enregistrée dans Google, veuillez donc suivre les instructions. En tant que flux, supprimez le référentiel GitHub ou réémettez la clé API (il est préférable de faire les deux), alors ne vous précipitez pas. </ détails>

3 Modifier la vue

L'emplacement d'affichage est OK n'importe où. Cette fois, il est décrit à la page suivante.

erb:app/views/homes/mypage.html.erb

<h2>Your MAP</h2>
<div id='map' class="<%= current_user.prefecture_code + current_user.city + current_user.street %>"></div>

<style>
#map{
  height: 300px;
}
</style>

<script>

let map
let geocoder

function initMap(){
  geocoder = new google.maps.Geocoder()
  geocoder.geocode( { 'address': $('#map').attr('class')}, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -35.6809591, lng: 139.7673068},
  zoom: 13
  });
}

function codeAddress(){
  let inputAddress = document.getElementById('address').value;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['SECRET_KEY'] %>&callback=initMap" async defer></script>

Ci-dessous le code avec des suppléments.

erb:app/views/homes/mypage.html.erb

<h2>Your MAP</h2>
<!-- id=Remplacez l'adresse enregistrée par la classe de carte.-->
<div id='map' class="<%= current_user.prefecture_code + current_user.city + current_user.street %>"></div>

<!-- id=Spécifiez la taille de la carte. * Il est correct de les assembler dans une feuille de style-->
<style>
#map{
  height: 300px;
}
</style>

<script>
//Comme il est également utilisé dans le codeAddress ci-dessous, la carte est définie en dehors de la fonction et le géocodeur est également préparé.
let map
let geocoder

function initMap(){
  //Initialiser le géocodeur
  geocoder = new google.maps.Geocoder()
  //géocode du géocodeur()Dans la méthode, envoyez une requête à l'API Geocoder pour l'historique et la latitude.
  // geocode()id à adresser dans la méthode=Remplacez l'adresse enregistrée de la classe de carte et obtenez l'historique et la latitude.
  geocoder.geocode( { 'address': $('#map').attr('class')}, function(results, status) {
  	//S'il n'y a pas d'erreur
  	if (status == 'OK') {
    // map.La carte est déplacée vers l'arrière-plan et la latitude décrits ci-dessus dans setCenter.
      map.setCenter(results[0].geometry.location);

    // google.maps.Le marqueur se tient à la position spécifiée sur Google Map avec le marqueur
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    //Si vous obtenez une erreur
    } else {
    //L'état d'erreur est affiché dans l'état et vous pouvez le résoudre en examinant le libellé.
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

  //Spécifiez la position initiale de la carte.
  //lat est l'histoire et lng est la latitude. (Ce qui suit spécifie la gare de Tokyo)
  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -35.6809591, lng: 139.7673068},
  //Vous pouvez modifier la taille du zoom à votre guise.
  //Si le nombre est grand, c'est un agrandissement.
  zoom: 13
  });
}

function codeAddress(){
  //Obtenez des commentaires
  let inputAddress = document.getElementById('address').value;
  //Déplacer la carte après le géocodage
}
</script>
<!--Il s'agit d'une description pour lire la clé API Google.-->
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['SECRET_KEY'] %>&callback=initMap" async defer></script>