モデル使わず指定位置を簡単にGoogleMapで表示(複数地点可)

はじめに

初投稿です、プログラミング歴は半年弱ほどなので、誤りがあるかもしれません。
ご指摘いただけると幸いです。
今後は、gmaps4railsを用いた現在地取得機能や、ジオコーディング機能(位置情報を入力すると緯度と経度に変換する)についても書いていこうと思っています。

記事制作の励みになりますので、いいと思ったらLGTMしてもらえると嬉しいです。

対象者

• 時間がない人
• ポートフォリオに地図を組み込んでオリジナリティを出したい人
• 決まった位置を地図で表示させたい人
• 指定する位置が決まっており、データベースを使う必要がない人

環境

Rails 5.1.6

この記事を読んで何ができるか

1. こんな感じの地図が作れます。

1. このように複数地点表示もできます。拠点が複数ある場合などに使えます。

それでは、具体的な手順を解説していきます。

##GoogleMap表示手順

⒈ GoogleMapsAPIの取得

下記サイトに沿って、GoogleMapsAPIを取得してください。
Google Maps の APIキー を取得する

取得したGoogleMapsAPIは環境変数に設定してください。

.env

GOOGLE_MAP_API_KEY="ここに取得したキーを貼る"

下記記事を参考にすると簡単です。
Railsで使える環境変数を管理できるgem(dotenv-rails)や.envの導入方法

2. gmaps4railsの導入

Gemfile

gem 'gmaps4rails'

を追記してから

$ bundle install

3. Javascriptの読み込み

下記を追記する。
出来るだけhtmlの上のほうの行に貼ったほうがエラーが出にくいです。(Javascriptの読み込み順に関するエラー)

application.html.erb

<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY'] %>"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

下記のリンク先のコードを全てコピーする。
http://underscorejs.org/underscore-min.js

app/assets/javascripts/underscore.js を作成し、さっきコピーしたコードを貼る。

app/assets/javascripts/underscore.js

// ここにコピーしたコードを貼る

次に、app/assets/javascripts/application.jsに下記を追記する。

//= require underscore
//= require gmaps/google

下記のようにします。

app/assets/javascripts/application.js

.
.
.
省略
//= require underscore
//= require gmaps/google
//= require_tree .

4.位置情報を取得する

GoogleMapで表示したい位置を検索して、検索結果のURLから位置情報(緯度と経度)を取得します。

例えば、「東京駅」で検索すると、URLがこのようになります。

https://www.google.co.jp/maps/place/東京駅/@35.6812362,139.7649361,17z/data=...以下省略

このうち、以下の部分に緯度と経度が含まれています。

...@35.6812362,139.7649361,17z...

緯度(latitude)=35.6812362
経度(longitude)=139.7649361

となります。

5. GoogleMapの表示

地図を表示させたい場所に、以下のコードを貼ってください。

foobar.html.erb

<div id="map" style='width: 100%; height: 500px;'></div>
  <script type="text/javascript">
    handler = Gmaps.build('Google');
      handler.buildMap({ provider: { scrollwheel: false }, internal: {id: 'map'}}, function(){
        markers = handler.addMarkers([
          {
            "lat": 35.6812362, //さっき取得した緯度
            "lng": 139.7649361, //さっき取得した経度
            "infowindow":'東京駅' //検索した位置の説明
          }
          ]);
          
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(15);
    });
  </script>

こんな感じになります。↓

緯度経度の数値を変えればどの場所でも表示できると思います。

また、縮尺を変えたい場合は、setZoom(15)の数値を変えてください。

これでおわりです。

複数地点をGoogleMap上に表示したい場合のみ、以下を読んでください。

6. GoogleMapに複数位置を表示

foobar.html.erb

markers = handler.addMarkers([
  {
    "lat": 35.6812362, //さっき取得した緯度
    "lng": 139.7649361, //さっき取得した経度
     "infowindow":'東京駅' //検索した位置の説明
  }
]);

一つ前のコードの中の、この部分をいじると表示する場所を増やせます。
例えば、以下のコードでは「東京駅」に加えて、横浜駅を表示させるようにしています。

foobar.html.erb

<div id="map" style='width: 100%; height: 500px;'></div>
  <script type="text/javascript">
    handler = Gmaps.build('Google');
      handler.buildMap({ provider: { scrollwheel: false }, internal: {id: 'map'}}, function(){
        markers = handler.addMarkers([
          {
            "lat": 35.6812362, //さっき取得した緯度
            "lng": 139.7649361, //さっき取得した経度
            "infowindow":'東京駅' //検索した位置の説明
          },{
            "lat": 35.4657901,
            "lng": 139.6201245,
            "infowindow":'横浜駅'
          }
          ]);
          
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(15);
    });
  </script>

このようになります。
地図の中心が２地点の真ん中になるので、setZoomの値を変えて、縮尺を変えています。

おわりに

以上です、何か質問要望等あればぜひコメントしてもらえればと思います。
あと、LGTMもしてもらえると嬉しいです。

参考

Githubの公式(英語ですが、動画のチュートリアルがあります)↓
https://github.com/apneadiving/Google-Maps-for-Rails
gmaps4railsの公式のサンプルコード集
https://apneadiving.github.io/
RailsでGoogleMapを表示させる(gem 'gmaps4rails'の使い方)