Google map apiを使って住所を検索して表示できるようにした

Google map apiの利用

こちらの記事を参考にしました。
Google Maps API を使ってみた
 "Maps JavaScript API”を利用してGoogle Mapをページに埋め込む方法

googleアカウントを作成
Google Cloud Pratformにアクセスし、プロジェクトを作成
Map JavaScript APIを有効化し、APIキーを取得

###　試してみる

html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>

<script src="http://maps.google.com/maps/api/js?key=YOUR_KEY&language=ja"></script>

<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
</head>

<body>
<div id="map"></div>

<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), Options);
</script>

</body>
</html>

API_Keyを環境変数にする

Gemfile

gem 'dotenv-rails'

ターミナル

bundle install

.envファイルを手動で作成する

.env

GoogleMap_API_Key = YOUR_Key

.gitignore

/.env

showページに合わせて動的に地図を変更する

Geocording APIを有効化する

View

institution_map.html.erb

〜略〜
    <div class="institution_show_address_container">
      <div class="institution_show_address_label show_label">住所</div>
      <%#- 表示元の住所 -%>
      <div class="institution_show_address_text show_text", id="institution_mapping_address"><%= institution.address %></div>
    </div>
〜略〜

<div class="map_container">
  <%# マップを表示する場所 %>
  <div id='institution_map'></div>
</div>

<script>
let map
let geocoder

<%# ページ呼出し時の処理 %>
function initMap(){
  geocoder = new google.maps.Geocoder()
  <%# 表示住所を取得 %>
  let putAddress = document.getElementById('institution_mapping_address').textContent;
  geocoder.geocode( { 'address': putAddress}, function(results, status) {
    if (status == 'OK') {
      <%# 表示場所にマップを表示 %>
      map = new google.maps.Map(document.getElementById('institution_map'), {
      zoom: 17,
      });
      map.setCenter(results[0].geometry.location);
      <%# マップにマーカーを表示 %>
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('該当する結果がありませんでした：' + status);
    }
  });
}

</script>
<%# ページを表示するときにinitMapを動作させる %>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GoogleMap_API_KEY'] %>&callback=initMap" async defer></script>

住所を検索して地図を表示できるようにする

search_address.html.erb

<div class="search_map_container">
  <h2>医療機関を検索</h2>
  <%# 検索したい住所や場所を入力するテキストボックス %>
  <input id="search_address" type="textbox" value="GeekSalon">
  <%# 処理を行うボタン %>
  <input id="search_address_button", type="button" value="検索" onclick="codeAddress()">
  <div>
    <%# 住所を表示する %>
    <div id="result_address">住所が表示されます</div>
  </div>
  <%# 地図を表示する %>
  <div id='search_map'></div>
</div>

<script>
let map
let geocoder

<%# 初期化処理 %>
function initMap(){
  geocoder = new google.maps.Geocoder()
  
  <%# 参考にする住所がないので初期設定を行う。 lat:緯度、lng:経度。サンプルは東京駅 %>
  map = new google.maps.Map(document.getElementById('search_map'), {
    center: {lat: 35.6809591, lng: 139.7673068},
    zoom: 15,
  });
  <%# マーカーを配置 %>
  marker = new google.maps.Marker({
    position:  {lat: 35.6809591, lng: 139.7673068},
    map: map
  });
}
<%# ボタンを押した時の処理 %>
function codeAddress(){
  <%# 検索したいアドレスを取得 %>
  let inputAddress = document.getElementById('search_address').value;
  
  geocoder.geocode( { 'address': inputAddress}, function(results, status) {
    if (status == 'OK') {
      <%# マップを表示
      map.setCenter(results[0].geometry.location);
      <%# 検索で得られた住所を取得 %>
      result_address = results[0].formatted_address;
      <%# 取得した住所を表示 %>
      document.getElementById('result_address').textContent = result_address
      <%# マーカーを表示 %>
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('該当する結果がありませんでした：' + status);
    }
  });
}
</script>
<%# 初期設定処理 %>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GoogleMap_API_KEY'] %>&callback=initMap" async defer></script>

周辺の施設を表示する

place_map.html.erb

<%# 初期住所 %>
<div class="place_medicalstaff_address"></div>
<%# 地図表示部分 %>
<div class="place_map_container">
  <h2>周辺の医療機関検索</h2>
  <div class="place_map_search_area">
    <%# 検索したい住所を入力 %>
    <input type="text" size="55" id="place_search">
    <%# 処理するボタン %>
    <input type="button" size="55" value="検索" id="place_search_button" onClick="SearchGo()">
  </div>
  <div id="place_map style="width: ３００px; height: ３００px;">"></div>
</div>

<%# 先にapiへアクセスしないと、googleメソッドがエラーになる %>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GoogleMap_API_KEY'] %>&libraries=places"></script>


<script>
var myMap;
var service;

<%# 初期処理 %>
function initialize() {
  geocoder = new google.maps.Geocoder()
<%# 初期住所の場所を取得する %>
  let defaultAddress = document.getElementById('place_medicalstaff_address').textContent;
  geocoder.geocode( { 'address': defaultAddress}, function(results, status) {
    if (status == 'OK') {
<%# 取得した住所情報からmapを表示　%>
      let lat = results[0].geometry.location.lat();
      let lng = results[0].geometry.location.lng();
      var initPos = new google.maps.LatLng(lat, lng);
<%# オプション（MapOptionクラス)で地図のプロパティを設定（倍率、マーカー表示位置、地図の種類) %>
      var myOptions = {
          zoom: 15,
          center: initPos,
      };
      myMap = new google.maps.Map(document.getElementById("place_map"), myOptions);
<%# 検索の条件を指定（緯度経度、半径、検索の分類） %>
      var request = {
      location: initPos,
      radius: 1000,             <%# ※１ 表示する半径領域を設定(1 = 1M) %>
      types: ['hospital']       <%# ※２ typesプロパティの施設タイプを設定 %>
      };
<%# placeAPIを使用して周辺情報を取得する %>
      var service = new google.maps.places.PlacesService(myMap);
      service.search(request, Result_Places);
    } else {
      alert('該当する結果がありませんでした：' + status);
    }
  });
}

<%# 検索結果を受け取る %>
function Result_Places(results, status){
<%# Placesが検索に成功したかとマうかをチェック %>
    if(status == google.maps.places.PlacesServiceStatus.OK) {
<%# 検索結果の数だけ反復処理を変数placeに格納 %>
        for (var i = 0; i < results.length; i++) {
            var place = results[i];
<%# 定義したcreateMarker関数で、取得したplaceにマーカーを表示 %>
            createMarker({
              text : place.name,
              position : place.geometry.location
            });
        }
    }
}

<%# 検索フォームから検索したとき %>
function SearchGo() {
  geocoder = new google.maps.Geocoder()
  <%# 検索したい住所を受け取る %>
  let defaultAddress = document.getElementById('place_search').value;
  geocoder.geocode( { 'address': defaultAddress}, function(results, status) {
    if (status == 'OK') {
      let lat = results[0].geometry.location.lat();
      let lng = results[0].geometry.location.lng();
      var initPos = new google.maps.LatLng(lat, lng);
      var myOptions = {
          center : initPos,
          zoom: 15
      };
      myMap = new google.maps.Map(document.getElementById("place_map"), myOptions);
      var request = {
        location: initPos,
        radius: 1000,
        types: ['hospital']
      };
      var service = new google.maps.places.PlacesService(myMap);
      service.search(request, Result_Places);
    } else {
      alert('該当する結果がありませんでした：' + status);
    }
  });
}

<%# 検索フォームで検索した場合の、map検索結果を受け取る %>
function result_search(results, status) {
    var bounds = new google.maps.LatLngBounds();
    for(var i = 0; i < results.length; i++){
        createMarker({
          position : results[i].geometry.location,
          text : results[i].name,
          map : myMap
        });
        bounds.extend(results[i].geometry.location);
    }
<%# Map.fitBounds()で、マーカーの場所を全て表示するように地図のビューポート(位置座標とズーム値)を変更 %>
    myMap.fitBounds(bounds);
}

<%# 該当する位置にマーカーを表示 %>
function createMarker(options) {
<%# マップ情報を保持しているmyMapオブジェクトを指定 %>
    options.map = myMap;
<%# Markcrクラスのオブジェクトmarkerを作成 %>
    var marker = new google.maps.Marker(options);
<%# 各施設の吹き出し(情報ウインドウ)に表示させる処理 %>
    var infoWnd = new google.maps.InfoWindow();
    infoWnd.setContent(options.text);
<%# addListenerメソッドを使ってイベントリスナーを登録 %>
    google.maps.event.addListener(marker, 'click', function(){
        infoWnd.open(myMap, marker);
    });
    return marker;
}

<%# ページ読み込み完了後、Googleマップを表示 %>
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Turbolinks

viewにscriptを記述する場合は、Turbolinksを切る方がいいらしい。

views/layouts/application.html.erb

<%= link_to "home", root_path, "data-turbolinks": false %>

全部切る場合は、app/javascript/application.js、Gemfileなどから、Turbolinksを削除すればOK（非推奨)

参考記事

Google Maps API の使い方・利用方法
 【Google MAP】名称から場所を検索・特定する
 Google Maps APIで住所から緯度経度を求める
 【Rails6 / Google Map API】初学者向け！Ruby on Railsで簡単にGoogle Map APIの導入する
 GoogleMapsAPIでマップで施設検索してやんよ!!!
Google API 第8回
 SYNCER (Google Maps API)
Rails Turbolinksをページ毎に無効化する方法