-Embed Google Map in your rails project and display it. ・ When the page is opened, the map and the initial marker are displayed. ・ An input box and a search button are available. -Enter the location you want to search in the input box and press the search button to display the map of that location.
Thank you for these articles. (From references)
[Before writing code] (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb) [I tried using the Google Maps API] (https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037) Search and identify the location by Google MAP name [Original application creation-Google Map usage verification with Rails-] (https://note.com/daddy0055/n/nddbe8da38bbc)
Suppose you write in posts. @ post.location is an example. Enter the initial values that are appropriate for your application.
html:posts/index.html.erb
<div id='target'></div>
<div class='map-btn'>
<input id="address" type="textbox" value="<%= @post.location %>">
<input type="button" value="Search" onclick="codeAddress()">
<div>
<script src="https://maps.googleapis.com/maps/api/js?key=My API key&callback=initMap" async defer></script>
style.scss
#target {
height: 300px;
width: 300px;
}
Javascript description
post.js
let map
let geocoder
let centerp = {lat: 33.60639, lng: 130.41806}
function initMap(){
geocoder = new google.maps.Geocoder()
map = new google.maps.Map(document.getElementById('target'), {
center: centerp,
zoom: 12,
});
marker = new google.maps.Marker({
position: centerp,
map: map
});
}
function codeAddress(){
let inputAddress = document.getElementById('address').value;
geocoder.geocode( { 'address': inputAddress}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('There were no applicable results:' + status);
}
});
}
Thank you for all the help you have given me. Thanks.
Before writing the code [https://qiita.com/nagaseToya/items/e49977efb686ed05eadb]
I tried using the Google Maps API [https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037]
Search and identify a location by Google MAP name [https://qiita.com/yoshi_yast/items/521c1f36306a180f45dd]
Original application creation-Google Map usage verification with Rails- [https://note.com/daddy0055/n/nddbe8da38bbc]
Recommended Posts