[Schienen] So zeigen Sie mehrere Markierungen auf Google Map an und zeigen beim Klicken eine Sprechblase an

Ziel

ezgif.com-video-to-gif.gif

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

Schlanke Einführung

Implementierung

1. Bearbeiten Sie den Controller

users_controller.rb


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

2. Bearbeiten Sie die Ansicht

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 = []; //Ich möchte mehrere Marker anzeigen, also ordne ich sie an
  let infoWindow = []; //Ich möchte mehrere Ballons anzeigen, also arrangiere ich sie
  let markerData = gon.users; //Weisen Sie der Variablen die vom Controller definierte Instanzvariable zu

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

    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 35.6585, lng: 139.7486 }, //Das Display ist auf dem Tokyo Tower zentriert
      zoom: 12,
    });

    //Zeigen Sie mehrere Marker und Sprechblasen durch iterative Verarbeitung an
    for (var i = 0; i < markerData.length; i++) {
      let id = markerData[i]['id']

      //Berechnen Sie den Breiten- und Längengrad jedes Punktes
      markerLatLng = new google.maps.LatLng({
        lat: markerData[i]['latitude'],
        lng: markerData[i]['longitude']
      });

      //Erstellen Sie Markierungen für jeden Punkt
      marker[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map
      });

      //Erstellen Sie für jeden Punkt einen Ballon
      infoWindow[i] = new google.maps.InfoWindow({
        //Inhalt des Ballons
        content: markerData[i]['address']
      });

      //Klickereignis zur Markierung hinzufügen
      markerEvent(i);
    }
  }

  //Klicken Sie auf die Markierung, um eine Sprechblase anzuzeigen
  function markerEvent(i) {
    marker[i].addListener('click', function () {
      infoWindow[i].open(map, marker[i]);
    });
  }

Wenn Sie den Inhalt des Ballons verknüpfen möchten, beschreiben Sie ihn wie folgt.

python


//Variieren Sie die ID jedes Benutzers
let id = markerData[i]['id']

infoWindow[i] = new google.maps.InfoWindow({
  // <a>Erstellen Sie einen Link mit einem Tag
  content: `<a href='/users/${ id }'>${ markerData[i]['address'] }</a>`
});

Hinweis

Wenn Sie "Turbolinks" nicht deaktivieren, wird die Karte nicht umgeschaltet. Deaktivieren Sie sie daher unbedingt.

So deaktivieren Sie Turbolinks

Recommended Posts

[Schienen] So zeigen Sie mehrere Markierungen auf Google Map an und zeigen beim Klicken eine Sprechblase an
Zeigen Sie mehrere Markierungen auf Google Map an
[Rails] google maps api So posten und anzeigen Sie einschließlich Karteninformationen
[Rails 6 / Google Map API] Veröffentlichen Sie eine Adresse und setzen Sie mehrere Markierungen auf der Karte
[Rails] So berechnen Sie Breiten- und Längengrade mit hoher Genauigkeit mithilfe der Geocoding-API und zeigen sie auf Google Map an
[Ruby on Rails] Google Map mehrere Pins, Sprechblasen, Links
So zeigen Sie eine Karte mit der Google Map API (Android) an
Zeigen Sie die mit Rails gem'geocoder 'eingegebene Adresse in Google Map an
Als ich versuchte, eine Rails-Umgebung auf WSL2 (Ubuntu 20.04LTS) zu erstellen, stolperte ich und fiel hin.
So zeigen Sie Formeln in Latex an, wenn Sie sympy (> = 1.4) in Google Colaboratory verwenden
So zeigen Sie PDF-Auflösung und detaillierte Informationen unter Linux an (pdfinfo)
Versuchen Sie, Google Map und Geography Map mit Python anzuzeigen
[Ruby on Rails] Anzeigen und Fixieren von GoolgeMAP mithilfe der Google-API
[Rails 6] Betten Sie Google Map in die App ein und fügen Sie der eingegebenen Adresse einen Marker hinzu. [Bestätigung der Details]
So schreiben Sie eine Zeichenfolge, wenn Python mehrere Zeilen enthält
So teilen und speichern Sie einen DataFrame
So verwenden Sie Google Assistant unter Windows 10
So zeigen Sie Piktogramme unter Manjaro Linux an
So testen Sie auf einer von Django authentifizierten Seite
Wie erstelle ich eine Pelican Site Map?
So führen Sie eine Django-Anwendung auf einem Docker-Container aus (Entwicklungs- und Produktionsumgebung)
So machen Sie mehrere Kernel auf Jupyter auswählbar
Zeigen Sie die Google Maps-API mit Rails und Pin-Anzeige an
Wie man sich erinnert, wenn man ein Wort vergisst
Wie man mit 2017 Windows ein anständiges Leben führt
So zeigen Sie Videos in Google Colab inline an
So erstellen Sie eine schöne Python-Umgebung auf einem neuen Mac und installieren Jupter Notebook
So stellen Sie pyenv unter Amazon Linux und Ubuntu ein, um eine Python 3.6.0-Umgebung zu erstellen
Visualisieren und verstehen Sie Japans regionales Netz auf einer Karte
So stellen Sie eine Django-Anwendung in der Alibaba-Cloud bereit
So installieren Sie Linux auf einem 32-Bit-UEFI-PC
So installieren Sie Git GUI und Gitk unter CentOS
Ein Memorandum zur Verwendung von Keras 'keras.preprocessing.image
Visualisieren Sie die Ziele und Ziele der B League auf einer Heatmap
So zeigen Sie mehrere Bilder einer Galaxie in Kacheln an
So erstellen Sie eine Django (Python) -Umgebung auf Docker
So zeigen Sie DataFrame als Tabelle in Markdown an
[Python] So erstellen Sie eine Korrelationsmatrix und eine Heatmap
Verwendung von Django mit Google App Engine / Python
So führen Sie Django unter IIS auf einem Windows-Server aus
So erstellen Sie eine Python-Umgebung unter Amazon Linux 2
Guter und schlechter Code zum Vergleich mit Minikarten
So richten Sie WSL2 unter Windows 10 ein und erstellen eine Lernumgebung für Linux-Befehle
So erhalten Sie die aktuellen Wetterdaten und zeigen sie auf der GUI an, während Sie sie automatisch aktualisieren
Herstellen einer Verbindung zu Cloud SQL PostgreSQL auf der Google Cloud Platform aus einer lokalen Umgebung mit Java
So zeichnen Sie einfach die Struktur eines neuronalen Netzwerks in Google Colaboratory mit "convnet-drawer"
So zeigen Sie eine bestimmte Zeile einer Datei oder ein Befehlsergebnis unter Linux an (sed, awk)