[Rails] So zeigen Sie Google Map an

Ziel

Entwicklungsumgebung

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

Annahme

Folgendes wurde implementiert.

・ Erstellen Sie Google-Konto Erledigt. ・ Schlanke Einführung

Registrieren Sie sich bei "Google Cloud Platform"

1. Greifen Sie auf den unten stehenden Link zu

Google Cloud Platform

2. Klicken Sie auf "Try it".

3. Geben Sie den Projektnamen (entsprechend) ein und klicken Sie auf "Erstellen".

4. Klicken Sie auf "Abrechnungskonto erstellen".

5. Überprüfen Sie die Nutzungsbedingungen und klicken Sie auf "Weiter".

6. Geben Sie Ihre Zahlungsinformationen ein und klicken Sie auf "Kostenlose Testversion starten".

Holen Sie sich "API-Schlüssel"

1. Klicken Sie auf "Zur API-Übersicht wechseln".

2. Klicken Sie auf "APIs und Dienste aktivieren".

3. Klicken Sie auf "Maps JavaScript API".

4. Klicken Sie auf "Aktivieren".

5. Klicken Sie auf "Anmeldeinformationen".

6. Klicken Sie auf "API- und Dienstanmeldeinformationen".

7. Klicken Sie auf "Anmeldeinformationen erstellen".

8. Klicken Sie auf "API-Schlüssel".

9. Klicken Sie einmal auf "Schließen"

10. Klicken Sie auf "API-Schlüsselname".

11. Legen Sie die Anmeldeinformationen fest

** ① Anwendungsbeschränkungen ** Wählen Sie "Keine".

** ② API-Einschränkungen ** Wählen Sie "Key Restrictions" und dann "Maps JavaScript API" aus dem Pulldown-Menü.

** ③ Stellen Sie sicher, dass Maps JavaScript API ausgewählt ist und klicken Sie auf Speichern **

12. Klicken Sie auf die Markierung, die vom roten Rahmen umgeben ist, und kopieren Sie den API-Schlüssel

Implementierung

1. Machen Sie den API-Schlüssel zu einer Umgebungsvariablen

** ① Einführung von "gem'dotenv-Rails" **

Gemfile

gem 'dotenv-rails'

Terminal

& bundle

** ② Erstellen Sie eine ".env" -Datei direkt unter der Anwendung **

• Wechseln Sie in das Anwendungsverzeichnis und führen Sie den folgenden Befehl aus

Terminal

$ touch .env 

** ③ Bearbeiten Sie die .env-Datei **

.env

GOOGLE_MAP_API = 'Kopierter API-Schlüssel' #Nachtrag

** ④ Bearbeiten Sie die .gitignore-Datei **

.gitignore

/.env #Nachtrag

2. Bearbeiten Sie die Ansicht

~html.slim

/Ansichts Karte
#map style='height: 500px; width: 500px;'

/API laden
- 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;

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

    //Erstellen Sie eine Karte
    map = new google.maps.Map(document.getElementById('map'), {
      //Geben Sie den Breiten- und Längengrad des Ortes an, der in der Mitte der Karte angezeigt werden soll
      center: { lat: 40.7828, lng:-73.9653 },
      zoom: 12,
    });

    //Geben Sie den Breiten- und Längengrad des Ortes an, an dem der Marker platziert werden soll
    marker = new google.maps.Marker({
      position: { lat: 40.7828, lng:-73.9653 },
      map: map
    });
  }

Hinweis

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

So deaktivieren Sie Turbolinks