[Rails] Comment afficher plusieurs marqueurs sur Google Map et afficher une bulle lorsque vous cliquez dessus

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince

• Implémentation de la fonction de connexion ・ Affichage de Google Map ・ Calculer la latitude et la longitude avec l'API Gocoding

la mise en oeuvre

1. Modifiez le contrôleur

users_controller.rb

def index
  @users = User.all
  gon.users = User.all
end

2. Modifiez la vue

slim:users/index.html.slim

#map style='height: 500px; width: 500px;'

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

javascript:

  let map;
  let marker = []; //Je veux afficher plusieurs marqueurs, donc je les arrange
  let infoWindow = []; //Je veux afficher plusieurs bulles, donc je les arrange
  let markerData = gon.users; //Affectez la variable d'instance définie par le contrôleur à la variable

  function initMap() {
    geocoder = new google.maps.Geocoder()

    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 35.6585, lng: 139.7486 }, //L'affichage est centré sur la tour de Tokyo
      zoom: 12,
    });

    //Afficher plusieurs marqueurs et bulles par traitement itératif
    for (var i = 0; i < markerData.length; i++) {
      let id = markerData[i]['id']

      //Calculez la latitude et la longitude de chaque point
      markerLatLng = new google.maps.LatLng({
        lat: markerData[i]['latitude'],
        lng: markerData[i]['longitude']
      });

      //Créez des marqueurs pour chaque point
      marker[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map
      });

      //Créez une bulle pour chaque point
      infoWindow[i] = new google.maps.InfoWindow({
        //Contenu du ballon
        content: markerData[i]['address']
      });

      //Ajouter un événement de clic au marqueur
      markerEvent(i);
    }
  }

  //Cliquez sur le marqueur pour afficher une bulle
  function markerEvent(i) {
    marker[i].addListener('click', function () {
      infoWindow[i].open(map, marker[i]);
    });
  }

Si vous souhaitez lier le contenu de la bulle, décrivez comme suit.

python

//Variez l'ID de chaque utilisateur
let id = markerData[i]['id']

infoWindow[i] = new google.maps.InfoWindow({
  // <a>Créer un lien avec une balise
  content: `<a href='/users/${ id }'>${ markerData[i]['address'] }</a>`
});

Mise en garde

Si vous ne désactivez pas turbolinks, la carte ne changera pas, alors assurez-vous de la désactiver.

Comment désactiver les turbolinks