Afficher l'API Google Maps avec Rails et affichage des broches

introduction

J'ai utilisé l'API Google Maps dans mon portefeuille dans le passé, mais j'ai oublié le flux, alors je m'en souviens.

environnement

rails 5.2.3 ruby 2.6.3

Que faire cette fois

-Obtenir la longitude et la latitude à partir des informations de position actuelle et afficher le marqueur -Changez les informations de liste acquises au format json et placez-les sur la carte comme marqueur. ・ Affichage de la carte

Créez un contrôleur à afficher, cette fois le nom de l'action est la recherche.

spaces_controller.rb

  def search
    @spaces = Space.all
  end

Après avoir créé un modèle et saisi une adresse, la latitude et la longitude sont automatiquement acquises.

space.rb

class Space < ApplicationRecord
  geocoded_by :address
  after_validation :geocode, if: :address_changed?
end

schema.rb

create_table "spaces", force: :cascade do |t|
    t.string "address"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.float "latitude"
    t.float "longitude"
end

Script pour afficher MAP

javascript

  function initMap() 
    //Où afficher la carte
    var target = document.getElementById('gmap');
    //Affichage de la carte
    var map = new google.maps.Map(document.getElementById('gmap'), {
      center: {lat: 35.681167, lng: 139.767052},//Réglage du point central
      zoom: 8//Paramètre d'agrandissement de la carte
    });

    //Créer un marqueur de position
    //Si vous ne pouvez pas obtenir votre position actuelle
    if(!navigator.geolocation){
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Il ne prend pas en charge la géolocalisation.');
      infoWindow.open(map);
    }

    navigator.geolocation.getCurrentPosition(function(position) {
      //Obtenez la longitude et la latitude de votre position actuelle
      var pos = { lat: position.coords.latitude, lng: position.coords.longitude };
      var mark = new google.maps.Marker({
        //Paramètres d'animation déroulante
        animation: google.maps.Animation.DROP,
        position: pos,
        map: map,
        //Créez une icône pour la broche de l'emplacement actuel. Cette fois, la conception par défaut est utilisée pour plusieurs marqueurs, alors changez-la.
        icon: {
          fillColor: "rgb(48, 255, 176)",
          fillOpacity: 1.0,
          path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
          scale: 4,
          strokeColor: "green",
          strokeWeight: 1.0
        }
      });
    }, function() {
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Error:La géolocalisation n'est pas valide.');
      infoWindow.open(map);
    });
    //Marqueurs multiples
    //Liste des données au format json
    var spaces = #{raw @spaces.to_json};
    var marker = [];
    var info;
    for(var i = 0; i < spaces.length; ++i) {
      //Créez des marqueurs en extrayant les informations de longitude et de latitude une par une de la liste
      spot = new google.maps.LatLng({lat: spaces[i].latitude, lng: spaces[i].longitude});
      marker[i] = new google.maps.Marker({
        position: spot,
        map: map,
      	animation: google.maps.Animation.DROP
      });
      markerEvent(i);
    }
    //Événement de survol de plusieurs marqueurs
    function markerEvent(i) {
      marker[i].addListener('mouseover', function() {
        var target = $('#' + (i + 1));
        $(".highlight").removeClass("highlight");
        target.addClass("highlight");
        var position = target.offset().top - 280;
        $('body,html').animate({scrollTop:position}, 400, 'swing');
      });
    }
    //-------------------------------------------------------------
  }


script src="https://maps.googleapis.com/maps/api/js?key=#{ENV[""]}&callback=initMap" async defer

Cette fois, le moteur de modèle est réglé sur slim et il est écrit directement dedans, alors soyez prudent car le stockage des variables de données est différent de l'habituel. Il est très facile d'obtenir la longitude et la latitude du nom à l'aide du géocodeur de gem, mais cette fois j'utilise Google Geocoding car il est inexact et n'affiche même pas l'unité d'adresse.