[JAVA] 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]

Recommended Posts

Introducing Google Map API with rails
Display Google Maps API with Rails and pin display
Book registration easily with Google Books API and Rails
[Rails] How to display Google Map
[Google Maps API] Map is not displayed and becomes blank [Rails]
Get holidays with the Google Calendar API
[Rails] google maps api How to post and display including map information
When introducing the Google Cloud Vision API to rails, I followed the documentation.
How to display Map using Google Map API (Android)
I tried "License OCR" with Google Vision API
Automatic voice transcription with Google Cloud Speech API
[Rails 6 / Google Map API] Post an address and set multiple markers on the map
[Rails] How to calculate latitude and longitude with high accuracy using Geocoding API and display it on Google Map
[GCP] [Python] Deploy API serverless with Google Cloud Functions!
Get data labels by linking with Google Cloud Vision API when previewing images with Rails
Create a tweet heatmap with the Google Maps API
Extrude with Fusion360 API
YOLP Get map information XML file with Yahoo! Static Map API
Hello World with Google App Engine (Java 8) + Servlet API 3.1 + Gradle
[Ruby on Rails] Multiple pins, balloons, and links on Google map
I tried Google Sign-In with Spring Boot + Spring Security REST API
Display the address entered using Rails gem'geocoder' on Google Map
Speech recognition of wav files with Google Cloud Speech API Beta
Beginners of Google Maps API and Twitter API made "tweet map"
Issue reverse geocoding in Japanese with Python Google Maps API
Play with YouTube Data API v3 using Google API Python Client
Python: Extract file information from shared drive with Google Drive API
Image download with Flickr API
Test embedded software with Google Test
Create an API with Django
Use Twitter API with Python
Try Google Mock with C
API with Flask + uWSGI + Nginx
Study Python with Google Colaboratory
About learning with google colab
Get information with zabbix api
Web API with Python + Falcon
Create patent map with Streamlit
Play RocketChat with API / Python
Support yourself with Twitter API
Call the API with python3.
Mount google drive with google-drive-ocamlfuse
Access Google Drive with Python
Use subsonic API with python3
Try OpenCV with Google Colaboratory
Google Drive Api Tips (Python)
Translate PHP_UML --help with google translate
Successful update_with_media with twitter API
Rails application building with Docker
Qiita API Oauth with Django
Get ranking with Rakuten API
Get Keyword Planner Search Volume / CPC / Competitiveness with Google Ads API
Try to display google map and geospatial information authority map with python
[Ruby on Rails] Display and pinning of GoolgeMAP using Google API