[RUBY] [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!

Aperçu

Un mémorandum est enregistré lorsque la carte est affichée sur la page des détails de l'article à 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.

environnement

・ Rubis '2.5.7' ・ Rails '5.2.3'

supposition

・ Vous avez déjà obtenu la clé API pour Google Maps. -Le modèle de poste (ici, le modèle Datespot) a une colonne d'adresse.

【référence】 Obtenez la clé API pour Google Maps

processus

1. Création d'une page de détails de publication

Veuillez créer la page des détails de l'article selon vos propres spécifications.

views/show.html.erb

<div class="container">
  <div class="row">
　　(réduction)
    <div class="col-md-8">
      <h2 class="datespot-name"><%= @datespot.name %></h2>
      <div class="datespot-info">
　　　　(réduction)
        <h4 id="address">【Adresse de rue】<%= @datespot.address %></h4>
　　　　(réduction)
      </div>
    </div>
  </div>
</div>
<%= render "map-show" %>

2. Créez une vue pour afficher la carte

Créez une vue qui affiche la carte.

views/_map-show.html.erb

<div class="map-container">
  <div class="map_wrapper">
    <div id="map" class="map"></div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY']%>&callback=initMap"></script>

Mettons la clé API obtenue dans la variable d'environnement.

stylesheets/custom.scss

#map{
  height: 310px;
  width: 550px;
}

Si vous ne spécifiez pas explicitement la taille de la carte, elle ne sera pas affichée, assurez-vous donc de la spécifier.

3. Définissez une fonction de rappel

Définissez la fonction de rappel décrite dans 2.

javascripts/map-show.js

function initMap() {
  //Assignez l'objet de l'élément div de la zone pour afficher la carte à la variable
  var target = document.getElementById('map');
  //Titre du marqueur
  var title = $('.datespot-name').text();
  //Obtention de l'adresse décrite en HTML
  var address = document.getElementById('address').textContent;
  //Générer une instance de géocodage
  var geocoder = new google.maps.Geocoder();

  //geocoder.geocode()Passez l'adresse et écrivez une fonction de rappel à traiter
  geocoder.geocode({ address: address }, function(results, status){
  //Le statut est OK et les résultats[0]Générer une carte si elle existe
    if (status === 'OK' && results[0]){
      //Attribuer une instance de la carte à une variable
      var map = new google.maps.Map(target, {
      //results[0].geometry.location contient des objets de latitude / longitude
        center: results[0].geometry.location,
        zoom: 15
      });
      //Génération de marqueurs
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        animation: google.maps.Animation.DROP
      });
      //Génération des coordonnées acquises
      var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
      //Créer du contenu à afficher dans la fenêtre d'informations
      var content = '<div id="map_content"><p>' + title + '<br/>' + address + '<br/><a href="https://maps.google.co.jp/maps?q=' + latlng + '&iwloc=J" target="_blank" rel="noopener noreferrer">Afficher sur Google Maps</a></p></div>';
      //Créer une instance de la fenêtre d'informations
      var infowindow = new google.maps.InfoWindow({
        content: content,
      });
      //Cliquez sur le marqueur pour afficher la fenêtre d'informations(Enregistrement de l'auditeur)
      google.maps.event.addListener(marker, 'click', function() {
        //Associer en spécifiant un marqueur dans le deuxième argument
        infowindow.open(map, marker);
      });
    }else{
    //Si l'état est autre que OK ou résultats[0]S'il n'existe pas, une alerte s'affiche et le traitement est interrompu.
      alert("L'emplacement n'a pas pu être obtenu à partir de l'adresse.: " + status);
      return;
    }
  });
}

var target = document.getElementById ('map'); est Il fait référence à la ``