Introducing Google Map API with rails

What you can do with the code on this page

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

Get Maps JavaScript API & Geocoding API

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)

code

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

References

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]