[Rails] How to display Google Map
Target
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
2. Click "Try it"
3. Enter the project name (appropriate) and click "Create"
4. Click "Create Billing Account"
5. Check the terms of use and click "Continue"
6. Enter your billing information and click "Start Free Trial"
Get the ʻAPI key`
1. Click "Go to API Overview"
2. Click "Enable APIs and Services"
3. Click "Maps JavaScript API"
4. Click "Enable"
5. Click "Credentials"
6. Click "API and Service Credentials"
7. Click "Create Credentials"
8. Click "API Key"
9. Click "Close" once
10. Click "API Key Name"
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 **
12. Click the mark surrounded by the red frame and copy the API key
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 **
- Move to the application directory and then execute the following command
Terminal
$ touch .env
** ③ 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
});
}
Caution
If you do not disable turbolinks, the map will not switch, so be sure to disable it.
Recommended Posts