I would like to introduce Google Map, which I often see on Web services when creating a portfolio! !! I thought that I implemented it, so I will write an article for memorandum and review this time. As for the contents, when you move to the display page, whether or not you have acquired your current location is displayed, and if you allow it, The current location can be displayed, and by entering the location you want to search in the search form, that location can also be displayed.
The article I referred to is [Rails6 / Google Map API] for beginners! Easy introduction of Google Map API with Ruby on Rails is! I'm really thankful to you.
Ruby on Rails '6.0.0' Ruby '2.6.5'
--Already obtained an API key on Google Cloud Platform.
Once you got the API key, you're almost done editing the view file. .. I wrote the following in html.erb that I want to display.
ruby:app/views/layouts/_map.html.erb
<div class="search-form">
<input id="address" class="search-name" type="textbox" placeholder="You can search for nearby government offices from your current location">
<input type="button" class="btn btn-outline-success" value="Search for" onclick="codeAddress()">
</div>
<div id='map'></div>
<style>
#map {
height: 50vh;
width: 60vw;
margin: 0 auto;
}
</style>
<script>
let map
let geocoder
function initMap(){
geocoder = new google.maps.Geocoder()
if(!navigator.geolocation) {
alert('Does not support Geolocation API');
return false;
}
navigator.geolocation.getCurrentPosition(function(position) {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), {
center: latLng,
zoom: 12,
});
marker = new google.maps.Marker({
position: latLng,
map: map
});
}, function() {
alert('Failed to get location information');
});
}
function codeAddress(){
let inputAddress = document.getElementById('address').value;
geocoder.geocode( { 'address': inputAddress}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
let marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('There were no applicable results:' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_SECRET_KEY'] %>&callback=initMap" async defer></script>
Then, I will explain it in parts.
ruby:app/views/layouts/_map.html.erb
<div class="search-form">
<input id="address" class="search-name" type="textbox" placeholder="You can search for nearby government offices from your current location">
<input type="button" class="btn btn-outline-success" value="Search for" onclick="codeAddress()">
</div>
The search form is first implemented in this part of the upper row. Buttons etc. use bootstrap.
ruby:app/views/layouts/_map.html.erb
<style>
#map {
height: 50vh;
width: 60vw;
margin: 0 auto;
}
</style>
In this part, the size and arrangement of the map are decided.
ruby:app/views/layouts/_map.html.erb
#↓ Acquisition process of current location
function initMap(){
geocoder = new google.maps.Geocoder()
if(!navigator.geolocation) {
alert('Does not support Geolocation API');
return false;
}
#↑ If the user's device does not support Google Map, the map will not be displayed.
navigator.geolocation.getCurrentPosition(function(position) {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), {
center: latLng,
zoom: 12,
});
#↑ If the location information can be obtained, the latitude and mild information of the current location are defined in latLng, and the process is being performed to display it on the map.
#「center:Display your current location in the center of the map with "latLng" and "zoom":"12" is the magnification of enlargement.
marker = new google.maps.Marker({
position: latLng,
map: map
});
#↑ A marker is displayed at the current location.
}, function() {
alert('Failed to get location information');
});
}
#If the acquisition fails in some way, it will be displayed as alert.
The above is the initial display stage when the page is opened. The processing content is described in the comment out.
ruby:app/views/layouts/_map.html.erb
#Click the search button to start the process.
function codeAddress(){
let inputAddress = document.getElementById('address').value;
#↑ The position entered in the search form is being acquired.
geocoder.geocode( { 'address': inputAddress}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
let marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
#↑ When the search result is hit, the latitude and longitude of the search result are displayed on the map and a marker is set.
} else {
alert('There were no applicable results:' + status);
}
});
}
#↑ If the search result is not applicable, the above is displayed.
The above is the process for displaying the search results.
ruby:app/views/layouts/_map.html.erb
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_SECRET_KEY'] %>&callback=initMap" async defer></script>
The last line is getting the API key. Handle the acquired key with environment variables.
This completes the implementation. When you move to the display page, you will be asked if you want to get location information, so if you allow it, your current location will be displayed. When you search this time, the marker will stick to two points, your location information and the corresponding place in the search result. From here, if you can display the distance and time to the search results, I think that the application will be easier to use, so I will study it. If there are any differences, please point them out.
Recommended Posts