[Rails] Comment afficher Google Map

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.

・ Créez un compte Google Terminé. ・ Présentation mince

Inscrivez-vous sur "Google Cloud Platform"

1. Accédez au lien ci-dessous

Google Cloud Platform

2. Cliquez sur "Essayer"

3. Entrez le nom du projet (approprié) et cliquez sur "Créer"

4. Cliquez sur "Créer un compte de facturation"

5. Vérifiez les conditions d'utilisation et cliquez sur "Continuer"

6. Entrez vos informations de facturation et cliquez sur "Démarrer l'essai gratuit"

ʻObtenir la clé API`

1. Cliquez sur "Accéder à la vue d'ensemble de l'API"

2. Cliquez sur "Activer les API et les services"

3. Cliquez sur "API JavaScript Maps".

4. Cliquez sur "Activer"

5. Cliquez sur "Credentials"

6. Cliquez sur "API et informations d'identification de service"

7. Cliquez sur "Créer des informations d'identification"

8. Cliquez sur "Clé API"

9. Cliquez une fois sur "Fermer"

10. Cliquez sur "Nom de la clé API"

11. Définissez les informations d'identification

** ① Restrictions d'application ** Sélectionnez "Aucun".

** ② Restrictions API ** Sélectionnez «Restrictions clés» et sélectionnez «API JavaScript Maps» dans le menu déroulant.

** ③ Assurez-vous que API JavaScript Maps est sélectionné et cliquez sur Enregistrer **

12. Cliquez sur la marque entourée par le cadre rouge et copiez la clé API

la mise en oeuvre

1.Faites de la clé API une variable d'environnement

** ① Introduction de "gem'dotenv-rails '" **

Gemfile

gem 'dotenv-rails'

Terminal

& bundle

** ② Créez un fichier ".env" directement sous l'application **

• Accédez au répertoire de l'application puis exécutez la commande suivante

Terminal

$ touch .env 

** ③ Editez le fichier .env **

.env

GOOGLE_MAP_API = 'Clé API copiée' #Postscript

** ④ Editez le fichier .gitignore **

.gitignore

/.env #Postscript

2. Modifiez la vue

~html.slim

/Voir la carte
#map style='height: 500px; width: 500px;'

/Charger l'API
- 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()

    //Créer une carte
    map = new google.maps.Map(document.getElementById('map'), {
      //Spécifiez la latitude et la longitude du lieu à afficher au centre de la carte
      center: { lat: 40.7828, lng:-73.9653 },
      zoom: 12,
    });

    //Spécifiez la latitude et la longitude de l'endroit où placer le marqueur
    marker = new google.maps.Marker({
      position: { lat: 40.7828, lng:-73.9653 },
      map: map
    });
  }

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