[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 ``

</ div> '' dans views / map-show.html.erb.

var title = $ ('.datespot-name'). text (); est Il fait référence à <h2 class = "datespot-name"> <% = @ datesspot.name%> </ h2> dans views / show.html.erb.

var adresse = document.getElementById ('adresse'). TextContent; Il fait référence à <h4 id = "address"> [address] <% = @ datesspot.address%> </ h4> dans views / show.html.erb.

résultat

Vous pouvez maintenant afficher la carte sur la page des détails de l'article à partir de l'adresse enregistrée par l'utilisateur! 200927_地図の表示.png

référence

Comment utiliser et utiliser l'API Google Maps Utilisons Google Maps

Recommended Posts

[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!
[Pour les débutants] Comment afficher des cartes et des champs de recherche à l'aide de l'API Javascript GoogleMap
Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map
Expliquer JavaScript de l'API de géocodage de Google Maps
[Rails] google maps api Comment publier et afficher des informations cartographiques
Comment afficher la carte à l'aide de l'API Google Map (Android)
Afficher l'API Google Maps avec Rails et affichage des broches
[Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte
[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
Créez une carte thermique de tweet avec l'API Google Maps
Les débutants de l'API Google Maps et de l'API Twitter ont créé "Tweet Map"
L'histoire de la création d'une base de données à l'aide de l'API Google Analytics
Créez un modèle pour stocker les informations de l'API Google Livres pour une manipulation et des tests intuitifs
Recherche par image de la pellicule en utilisant Pythonista3
Comment obtenir des abonnés et des abonnés de Python à l'aide de l'API Mastodon
[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
[Rails 6] Intégrez Google Map dans l'application et ajoutez un marqueur à l'adresse saisie. [Confirmation des détails]
Affichons la carte en utilisant Basemap
Notez que GoogleMap.getProjection dans l'API Google Maps Android n'est pas un singleton
Affichez le résultat de l'analyse vidéo à l'aide de l'API Cloud Video Intelligence de Colaboratory.
[Rails] Affichage de Google Maps à l'aide de l'API Google Maps et recherche d'itinéraires entre plusieurs points
Recevez des nouvelles de chacune des trois principales entreprises de téléphonie mobile en utilisant Django et l'API News
Envoyez un e-mail depuis le serveur VirtualBox CentOS8 en utilisant votre compte Google comme adresse d'envoi et en utilisant le mot de passe de l'application
Obtenez l'adresse à partir de la latitude et de la longitude
Créez une API REST à l'aide du modèle appris dans Lobe et TensorFlow Serving.
L'analyse d'image a été facile à l'aide des données et de l'API fournies par Microsoft COCO