[RUBY] [Rails] How to display Google Map

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

・ Create Google Account Done. ・ Slim introduction

Register with Google Cloud Platform

1. Access the link below

Google Cloud Platform

2. Click "Try it"

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

3. Enter the project name (appropriate) and click "Create"

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

4. Click "Create Billing Account"

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

5. Check the terms of use and click "Continue"

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

6. Enter your billing information and click "Start Free Trial"

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

Get the ʻAPI key`

1. Click "Go to API Overview"

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

2. Click "Enable APIs and Services"

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

3. Click "Maps JavaScript API"

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

4. Click "Enable"

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

5. Click "Credentials"

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

6. Click "API and Service Credentials"

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

7. Click "Create Credentials"

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

8. Click "API Key"

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

9. Click "Close" once

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

10. Click "API Key Name"

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

11. Set the authentication information

** ① Application restrictions ** Select None.

** ② API restrictions ** Select Restrict Keys and select Maps JavaScript API from the pull-down menu.

** ③ Make sure that Maps JavaScript API is selected and click Save ** スクリーンショット 2020-06-02 11.10.13.png

12. Click the mark surrounded by the red frame and copy the API key

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

Implementation

1. Make API key an environment variable

** ① Introduced "gem'dotenv-rails'" **

Gemfile


gem 'dotenv-rails'

Terminal


& bundle

** ② Create a ".env" file directly under the application **

Terminal


$ touch .env 

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

** ③ Edit the .env file **

.env


GOOGLE_MAP_API = 'Copyed API key' #Postscript

** ④ Edit the .gitignore file **

.gitignore


/.env #Postscript

2. Edit the view

~html.slim


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

/Load 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()

    //Create a map
    map = new google.maps.Map(document.getElementById('map'), {
      //Specify the latitude and longitude of the location to be displayed in the center of the map
      center: { lat: 40.7828, lng:-73.9653 },
      zoom: 12,
    });

    //Specify the latitude and longitude of the place to put the marker
    marker = new google.maps.Marker({
      position: { lat: 40.7828, lng:-73.9653 },
      map: map
    });
  }

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

Caution

If you do not disable turbolinks, the map will not switch, so be sure to disable it.

How to disable turbolinks

Recommended Posts

[Rails] How to display Google Map
How to display Map using Google Map API (Android)
[Rails] google maps api How to post and display including map information
[Rails] How to introduce Google Analytics [Easy]
[Rails] How to display multiple markers on Google Map and display a balloon when clicked
How to display videos inline in Google Colab
How to use Google Colaboratory
[Rails] How to calculate latitude and longitude with high accuracy using Geocoding API and display it on Google Map
Display multiple markers on Google Map
[Memo] How to use Google MµG
Display the address entered using Rails gem'geocoder' on Google Map
Introducing Google Map API with rails
How to display formulas in latex when using sympy (> = 1.4) in Google Colaboratory
Try to display google map and geospatial information authority map with python
How to display the progress bar (tqdm)
[Memo] How to use BeautifulSoup4 (1) Display html
[Python] How to display random numbers (random module)
How to update Google Sheets from Python
How to use Google Test in C
How to use Google Assistant on Windows 10
How to display multiplication table in python
How to display emoji on Manjaro Linux
How to search Google Drive with Google Colaboratory
How to display python Japanese with lolipop
How to make a Pelican site map
How to use Map in Android ViewPager
How to display Hello world in python
[python] How to display list elements side by side
How to implement Rails helper-like functionality in Django
[Python] How to change the date format (display format)
Display Google Maps API with Rails and pin display
How to use the Google Cloud Translation API
How to display images continuously with matplotlib Note
How to use Python-shell
[Rails] How to get location information using Geolocation API
How to use tf.data
How to use virtualenv
How to use Seaboan
How to use image-match
How to use shogun
How to run AutoGluon in Google Colab GPU environment
How to install Python
How to use Pandas 2
How to read PyPI
How to install pip
How to use Virtualenv
How to use numpy.vectorize
How to update easy_install
How to install archlinux
How to use pytest_report_header
How to restart gunicorn
How to install python
How to virtual host
How to debug selenium
How to use partial
How to load files in Google Drive with Google Colaboratory
How to install Google Test / Google Mock in Visual Studio 2019
How to use Bio.Phylo
How to read JSON
How to use SymPy
How to use x-means