[Rails] Comment afficher Google Map

Cible

ezgif.com-video-to-gif.gif

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"

スクリーンショット 2020-06-02 10.25.36.png

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

スクリーンショット 2020-06-02 10.36.24.png

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

スクリーンショット 2020-06-02 10.38.49.png

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

スクリーンショット 2020-06-02 10.40.35.png

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

スクリーンショット 2020-06-02 10.43.38.png

ʻObtenir la clé API`

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

スクリーンショット 2020-06-02 10.53.15.png

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

スクリーンショット 2020-06-02 10.55.46.png

3. Cliquez sur "API JavaScript Maps".

スクリーンショット 2020-06-02 10.58.27.png

4. Cliquez sur "Activer"

スクリーンショット 2020-06-02 10.58.37.png

5. Cliquez sur "Credentials"

スクリーンショット 2020-06-02 11.01.05.png

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

スクリーンショット 2020-06-02 11.01.35.png

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

スクリーンショット 2020-06-02 11.01.43.png

8. Cliquez sur "Clé API"

スクリーンショット 2020-06-02 11.01.50.png

9. Cliquez une fois sur "Fermer"

スクリーンショット 2020-06-02 11.13.09.png

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

スクリーンショット 2020-06-02 11.06.41.png

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 ** スクリーンショット 2020-06-02 11.10.13.png

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

スクリーンショット 2020-06-02 11.18.56.png

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 **

Terminal


$ touch .env 

スクリーンショット 2020-06-02 11.32.54.png

** ③ 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
    });
  }

スクリーンショット 2020-06-02 11.58.42.png

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

Recommended Posts

[Rails] Comment afficher Google Map
Comment afficher la carte à l'aide de l'API Google Map (Android)
[Rails] google maps api Comment publier et afficher des informations cartographiques
[Rails] Comment présenter Google Analytics [Facile]
[Rails] Comment afficher plusieurs marqueurs sur Google Map et afficher une bulle lorsque vous cliquez dessus
Comment afficher des vidéos en ligne dans Google Colab
Comment utiliser Google Colaboratory
[Rails] Comment calculer la latitude et la longitude avec une grande précision à l'aide de l'API Geocoding et l'afficher sur Google Map
Afficher plusieurs marqueurs sur Google Map
[Mémo] Comment utiliser Google MµG
Afficher l'adresse saisie à l'aide de Rails gem'geocoder 'sur Google Map
Présentation de l'API Google Map avec rails
Comment afficher des formules en latex lors de l'utilisation de Sympy (> = 1.4) dans Google Colaboratory
Essayez d'afficher la carte google et la carte géographique avec python
Comment afficher la barre de progression (tqdm)
[Mémo] Comment utiliser BeautifulSoup4 (1) Afficher html
[Python] Comment afficher des nombres aléatoires (module aléatoire)
Comment mettre à jour Google Sheets à partir de Python
Comment utiliser Google Test en langage C
Comment utiliser l'Assistant Google sur Windows 10
Comment afficher la table quatre-vingt-dix-neuf en python
Comment afficher des pictogrammes sur Manjaro Linux
Comment rechercher Google Drive dans Google Colaboratory
Comment afficher le japonais python avec lolipop
Comment créer un plan de site Pelican
Comment utiliser Map dans ViewPager d'Android
Comment afficher Hello World en python
[python] Comment afficher les éléments de la liste côte à côte
Comment implémenter la fonctionnalité de type helper Rails dans Django
[Python] Comment changer le format de la date (format d'affichage)
Afficher l'API Google Maps avec Rails et affichage des broches
Comment utiliser l'API Google Cloud Translation
Comment afficher des images en continu avec matplotlib Memo
Comment utiliser Python-shell
[Rails] Comment obtenir des informations de localisation à l'aide de l'API de géolocalisation
Remarques sur l'utilisation de tf.data
Comment utiliser virtualenv
Comment utiliser Seaboan
Comment utiliser la correspondance d'image
Comment utiliser le shogun
Comment exécuter AutoGluon dans un environnement GPU Google Colab
Comment installer Python
Comment utiliser Pandas 2
Comment lire PyPI
Comment installer pip
Comment utiliser Virtualenv
Comment utiliser numpy.vectorize
Comment mettre à jour easy_install
Comment installer Archlinux
Comment utiliser pytest_report_header
Comment redémarrer gunicorn
Comment installer python
Comment héberger virtuel
Comment déboguer le sélénium
Comment utiliser partiel
Comment charger des fichiers dans Google Drive avec Google Colaboratory
Comment installer Google Test / Google Mock dans Visual Studio 2019
Comment utiliser Bio.Phylo
Comment lire JSON
Comment utiliser SymPy
Comment utiliser x-means