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

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

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

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

## 環境
Rails 5.1.6

## この記事を読んで何ができるか
1. こんな感じの地図が作れます。
<img width="1004" alt="完成した地図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512687/27412a98-44ba-5524-6182-897413847bcc.png">

2. このように複数地点表示もできます。拠点が複数ある場合などに使えます。
<img width="984" alt="複数地点表示" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512687/a1b37b02-e9b5-8acd-cfa6-d78dda39909d.png">

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


##GoogleMap表示手順
### ⒈ GoogleMapsAPIの取得
下記サイトに沿って、GoogleMapsAPIを取得してください。
[Google Maps の APIキー を取得する](https://nendeb.com/276)

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

```:.env
GOOGLE_MAP_API_KEY="ここに取得したキーを貼る"
```
下記記事を参考にすると簡単です。
[Railsで使える環境変数を管理できるgem(dotenv-rails)や.envの導入方法](https://qiita.com/ryosuketter/items/ceb592dc6b23a20e51b5)

### 2. gmaps4railsの導入

```gemfile:Gemfile
gem 'gmaps4rails'
```

を追記してから

```
$ bundle install
```

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

```html: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](https://www.google.co.jp/maps/?hl=ja)で表示したい位置を検索して、検索結果の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の表示

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

```html: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>
```
こんな感じになります。↓
<img width="1004" alt="完成した地図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512687/27412a98-44ba-5524-6182-897413847bcc.png">

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

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

これでおわりです。

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

### 6. GoogleMapに複数位置を表示
```html:foobar.html.erb
markers = handler.addMarkers([
  {
    "lat": 35.6812362, //さっき取得した緯度
    "lng": 139.7649361, //さっき取得した経度
     "infowindow":'東京駅' //検索した位置の説明
  }
]);
```
一つ前のコードの中の、この部分をいじると表示する場所を増やせます。
例えば、以下のコードでは「東京駅」に加えて、横浜駅を表示させるようにしています。

```html: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`の値を変えて、縮尺を変えています。
<img width="984" alt="複数地点表示" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512687/a1b37b02-e9b5-8acd-cfa6-d78dda39909d.png">
## おわりに

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

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