GoogleMapsAPIを使って位置情報を取得してみた

## はじめに
現在オリジナルプロダクトを作成しており、その中で現在地を取得し周辺の店舗情報を取得、表示する機能を実装しました。
Rails + erb構成となっています。

## 使用するAPI
- Maps JavaScript API
Google Mapを表示するためのAPI
https://developers.google.com/maps/documentation/javascript/overview?hl=ja

- Geolocation API
位置情報の取得をするAPI
https://developers.google.com/maps/documentation/geolocation/overview?hl=ja

- Places API
周辺の店舗情報を取得するAPI
https://developers.google.com/maps/documentation/places/web-service/overview?hl=ja

- 参考にした記事
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037


## 実装内容
### 1. APIキーの設定
Google Maps APIが使用できるように環境変数へ設定しスクリプトを読み込ませる
- key=<%= ENV["GOOGLE_MAPS_API_KEY"] %> → 環境変数からAPIキーを取得
- libraries=places → Places APIを利用するために指定
- callback=initMap → Google Mapの初期化関数を指定
```javascript

<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>&libraries=places&callback=initMap" async defer></script>

```
### 2. コードの全体

```javascript

  <script>
  window.initMap = function () {
    navigator.geolocation.getCurrentPosition((position) => {
      const userLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      const map = new google.maps.Map(document.getElementById('map'), {
        center: userLocation,
        zoom: 15
      });

      const image = "https://maps.google.com/mapfiles/ms/icons/blue-dot.png";

      new google.maps.Marker({
        position: userLocation,
        map: map,
        title: "あなたの現在地",
        icon: image
      });

      nearShowStore(map, userLocation);
    });
  };

  function nearShowStore(map, userLocation) {
    const service = new google.maps.places.PlacesService(map);

    service.nearbySearch({
      location: userLocation,
      radius: 5000,
      keyword: "古着屋 リサイクルショップ"
    }, (results, status) => {
      results.forEach((place) => {
        const marker = new google.maps.Marker({
          position: place.geometry.location,
          map: map,
          title: place.name,
        });

        const contents = `
          <div>
            <strong>${place.name}</strong><br>
            <strong>住所:</strong>${place.vicinity}
          </div>`;

        const infoWindow = new google.maps.InfoWindow({
          content: contents
        });

        marker.addListener('mouseover', () => {
          infoWindow.open(map, marker);
        });

        marker.addListener('mouseout', () => {
          infoWindow.close();
        });
      });
    });
  }
</script>
```

### 3. 各コードの解説
```javascript
window.initMap = function () {}
```
- Google Maps APIの読み込み完了時に自動で実行される初期化関数

- callback=initMap に対応するため、グローバルスコープに定義する必要がある

```javascript
navigator.geolocation.getCurrentPosition()
```
- ブラウザの現在地取得API（Geolocation API）
- 成功時に position.coords.latitude / longitude を取得

```javascript
new google.maps.Map()
```
- 取得した位置情報を中心に地図を表示
- zoom: 15 はマップの拡大率
```javascript
new google.maps.Marker()
```
- 現在地に青いマーカー（カスタムアイコン）を設置

```javascript
PlacesService().nearbySearch()
```
- userLocation を中心に、半径5000m以内の「古着屋」「リサイクルショップ」を検索
- 検索結果ごとにマーカーを設置し、クリックすると InfoWindow を表示


## まとめ
- Google Maps API を使えば、現在地の地図表示と周辺店舗の検索表示が簡単にできる
- Geolocation API で現在地を取得し、Places API でキーワード検索が可能
- マーカーとクリック時の情報表示（InfoWindow）ができる