RailsアプリケーションでGoogleマップを実装する方法🗺️

はじめに (対象読者・この記事でわかること)

この記事は、Ruby on Railsを使用したWebアプリケーション開発に取り組んでいる方を対象にしています。特に、Googleマップを自作のRailsアプリケーションに統合したいと考えている開発者向けの内容です。

この記事を読むことで、Google Cloud ConsoleでのAPIキー取得方法、RailsアプリケーションへのGoogle Maps JavaScript APIの組み込み方、マップの表示方法、マーカーの追加方法、そして位置情報の表示機能を実装する具体的な手順を理解できます。また、実装過程でよく発生するエラーの解決策についても解説するので、スムーズにマップ機能を実装できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 前提となる知識1 (例: Ruby on Railsの基本的な知識) 前提となる知識2 (例: HTML/CSSの基本的な知識) 前提となる知識3 (例: JavaScriptの基本的な知識)

GoogleマップをRailsアプリケーションに統合する概要

GoogleマップをWebアプリケーションに統合することは、現代の多くのサービスで必須機能となっています。特に、店舗検索サイト、不動産情報サイト、旅行プランニングアプリなどでは、ユーザーに場所を視覚的に提示することが重要です。

RailsアプリケーションにGoogleマップを統合するには、主に2つのステップがあります。まず、Google Cloud ConsoleでGoogle Maps APIのAPIキーを取得します。次に、そのAPIキーを使用してRailsアプリケーションにGoogle Maps JavaScript APIを読み込み、ビュー（表示部分）にマップを表示するための実装を行います。

この統合プロセスでは、RailsのアセットパイプラインやJavaScriptの非同期読み込みの理解も必要になります。また、ユーザーの位置情報を取得する機能や、マーカーにイベントリスナーを追加するなどの高度な機能を実装するためには、JavaScriptの知識も求められます。

具体的な実装手順

ステップ1：Google Cloud ConsoleでAPIキーを取得

まず最初に、Google Cloud ConsoleにアクセスしてGoogle Maps PlatformのAPIキーを取得します。

1. Google Cloud ConsoleにGoogleアカウントでログインします
2. プロジェクトを作成または選択します（既存のプロジェクトを使用しても構いません）
3. 左側のメニューから「APIとサービス」→「認証情報」を選択します
4. 「認証情報を作成」→「APIキー」をクリックします
5. APIキーが生成されるので、これをコピーして安全な場所に保存します
6. 「APIキー」の横にある「EDIT API KEY」をクリックします
7. 「アプリケーションの制限」セクションで、「HTTPリファラー（ウェブサイト）」を選択します
8. RailsアプリケーションのURLを追加します（開発環境ではhttp://localhost:3000を追加）
9. 「保存」をクリックします

APIキーが取得できたので、次にGoogle Maps Platformで必要なAPIを有効にします。

1. 左側のメニューから「APIとサービス」→「ライブラリ」を選択します
2. 検索ボックスに「Maps JavaScript API」と入力し、結果から有効にします
3. 同様に、「Geocoding API」と「Places API」も有効にします（これらは後ほど位置情報検索機能を実装する際に使用します）

ステップ2：RailsアプリケーションにGoogle Maps JavaScript APIを追加

APIキーを取得したら、次にRailsアプリケーションにGoogle Maps JavaScript APIを組み込みます。

まず、Railsアプリケーションのレイアウトファイル（通常はapp/views/layouts/application.html.erb）にGoogle Maps JavaScript APIを読み込むためのスクリプトタグを追加します。

Erb

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap", async: true, defer: true %>

上記コードのYOUR_API_KEY部分を、先ほど取得した実際のAPIキーに置き換えます。async: trueとdefer: trueを指定することで、ページのレンダリングをブロックせずにスクリプトを読み込むことができます。

ステップ3：ビューにマップを表示

次に、マップを表示するためのHTML要素とJavaScriptコードを実装します。

まず、マップを表示するためのコンテナ要素をビューに追加します。例えば、app/views/pages/home.html.erbに以下のように記述します。

Erb

<div id="map" style="height: 400px; width: 100%;"></div>

次に、マップを初期化するJavaScriptコードを実装します。このコードは、Google Maps APIが完全に読み込まれた後に実行される必要があります。

app/assets/javascripts/application.jsに以下のJavaScriptコードを追加します。

Javascript

function initMap() {
  // 初期位置の緯度経度（例：東京タワー）
  const initialLocation = { lat: 35.658581, lng: 139.745433 };

  // マップのオプションを設定
  const mapOptions = {
    center: initialLocation,
    zoom: 15,
    mapTypeControl: true,
    streetViewControl: true,
    fullscreenControl: true
  };

  // マップを作成
  const map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // マーカーを作成
  const marker = new google.maps.Marker({
    position: initialLocation,
    map: map,
    title: "東京タワー"
  });
}

上記コードでは、まず初期位置の緯度経度を指定し、マップのオプションを設定しています。次に、google.maps.Mapコンストラクタを使用してマップを作成し、google.maps.Markerコンストラクタを使用してマーカーを追加しています。

ステップ4：動的な位置情報の表示

次に、データベースから位置情報を取得して動的にマップに表示する方法を実装します。

まず、モデルに位置情報を保存するためのカラムを追加します。例えば、placesテーブルに緯度と経度を保存するカラムを追加する場合、マイグレーションファイルを作成します。

Bash

rails generate migration AddLatitudeAndLongitudeToPlaces latitude:decimal{10,6} longitude:decimal{10,6}

上記コマンドを実行後、db/migrate/ディレクトリに生成されたマイグレーションファイルを適用します。

Bash

rails db:migrate

次に、コントローラーで位置情報を取得してビューに渡すようにします。例えば、PlacesControllerのindexアクションを以下のように修正します。

Ruby

class PlacesController < ApplicationController
  def index
    @places = Place.all
    @markers = @places.map do |place|
      {
        lat: place.latitude,
        lng: place.longitude,
        info_window: render_to_string(partial: "info_window", locals: { place: place }),
        image_url: helpers.asset_url("marker.png")
      }
    end
  end
end

次に、ビューでマーカーを動的に表示するJavaScriptコードを実装します。app/views/places/index.html.erbを以下のように修正します。

Erb

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  function initMap() {
    // マップの初期位置を設定
    const initialLocation = { lat: 35.658581, lng: 139.745433 };

    // マップを作成
    const map = new google.maps.Map(document.getElementById("map"), {
      center: initialLocation,
      zoom: 12
    });

    // マーカーを追加
    <%= @markers.to_json.html_safe %>.forEach(function(marker_data) {
      const marker = new google.maps.Marker({
        position: { lat: marker_data.lat, lng: marker_data.lng },
        map: map,
        title: marker_data.title
      });

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

      marker.addListener("click", () => {
        infoWindow.open(map, marker);
      });
    });
  }
</script>

上記コードでは、コントローラーから渡された@markersデータを使用して、各場所にマーカーを追加しています。また、マーカーをクリックすると情報ウィンドウが表示されるようにイベントリスナーを追加しています。

ステップ5：カスタマイズと機能拡張

マップの表示ができたので、さらに機能を追加してカスタマイズします。

検索機能の追加

ユーザーが場所を検索できるように、Places APIの検索機能を実装します。

まず、app/views/places/index.html.erbに検索ボックスを追加します。

Erb

<div class="search-box">
  <input type="text" id="place-search" placeholder="場所を検索">
  <button id="search-button">検索</button>
</div>
<div id="map" style="height: 400px; width: 100%;"></div>

次に、検索機能を実装するJavaScriptコードを追加します。

Erb

<script>
  function initMap() {
    // マップの初期位置を設定
    const initialLocation = { lat: 35.658581, lng: 139.745433 };

    // マップを作成
    const map = new google.maps.Map(document.getElementById("map"), {
      center: initialLocation,
      zoom: 12
    });

    // マーカーを追加
    <%= @markers.to_json.html_safe %>.forEach(function(marker_data) {
      const marker = new google.maps.Marker({
        position: { lat: marker_data.lat, lng: marker_data.lng },
        map: map,
        title: marker_data.title
      });

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

      marker.addListener("click", () => {
        infoWindow.open(map, marker);
      });
    });

    // 検索機能
    const searchInput = document.getElementById("place-search");
    const searchButton = document.getElementById("search-button");

    searchButton.addEventListener("click", () => {
      const place = searchInput.value;

      const geocoder = new google.maps.Geocoder();
      geocoder.geocode({ address: place }, (results, status) => {
        if (status === "OK") {
          map.setCenter(results[0].geometry.location);
          map.setZoom(15);

          new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: place
          });
        } else {
          alert("場所が見つかりませんでした: " + status);
        }
      });
    });
  }
</script>

上記コードでは、検索ボックスに入力された場所をGeocoding APIを使用して緯度経度に変換し、マップの中心位置を変更しています。また、検索した場所にマーカーを追加しています。

ユーザーの現在位置の表示

ユーザーの現在位置を取得してマップに表示する機能を実装します。

Javascript

function initMap() {
  // マップの初期位置を設定
  const initialLocation = { lat: 35.658581, lng: 139.745433 };

  // マップを作成
  const map = new google.maps.Map(document.getElementById("map"), {
    center: initialLocation,
    zoom: 12
  });

  // ブラウザがGeolocation APIをサポートしているかチェック
  if (navigator.geolocation) {
    // ユーザーの現在位置を取得
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        // マップの中心を現在位置に設定
        map.setCenter(pos);

        // 現在位置にマーカーを追加
        new google.maps.Marker({
          position: pos,
          map: map,
          title: "現在位置",
          icon: {
            url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
          }
        });
      },
      () => {
        // 位置情報の取得に失敗した場合
        handleLocationError(true, infoWindow, map.getCenter());
      }
    );
  } else {
    // ブラウザがGeolocation APIをサポートしていない場合
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "エラー: 位置情報の取得に失敗しました。"
      : "エラー: ブラウザが位置情報をサポートしていません。"
  );
  infoWindow.open(map);
}

上記コードでは、navigator.geolocationを使用してユーザーの現在位置を取得し、マップの中心位置を変更しています。また、現在位置に緑色のマーカーを追加しています。

ハマった点やエラー解決

実装過程で遭遇する可能性のある問題とその解決策を以下に示します。

問題1：APIキーが無効または拒否された

エラーメッセージ：「Google Maps API error: InvalidKeyMapError」 原因：APIキーが無効、またはリファラ制限が設定されていない 解決策： 1. Google Cloud ConsoleでAPIキーを確認し、正しいキーを使用しているか確認 2. APIキーのリファラ制限が正しく設定されているか確認 3. APIキーが有効になっているか確認

問題2：マップが表示されない

エラーメッセージ：「Google Maps API has not been used in project XXX before」 原因：APIが有効になっていない 解決策： 1. Google Cloud Consoleで「Maps JavaScript API」が有効になっているか確認 2. 必要に応じて「Geocoding API」と「Places API」も有効にする

問題3：位置情報の取得に失敗する

エラーメッセージ：「User denied the request for Geolocation」 原因：ユーザーが位置情報の共有を拒否した 解決策： 1. ユーザーに位置情報の共有を促すUIを追加 2. デフォルトの位置情報を設定し、位置情報の取得に失敗した場合に使用する

問題4：マーカーが表示されない

エラーメッセージ：「TypeError: Cannot read property 'map' of null」 原因：マーカーのデータが正しく渡されていない 解決策： 1. コントローラーで渡しているマーカーデータを確認 2. ビューでデータが正しく受け取れているか確認 3. JavaScriptコンソールでエラーを確認し、問題を特定

まとめ

本記事では、RailsアプリケーションにGoogleマップを統合する方法について解説しました。

• Google Cloud ConsoleでのAPIキー取得方法
• RailsアプリケーションへのGoogle Maps JavaScript APIの組み込み方
• 基本的なマップの表示方法
• データベースからの位置情報に基づくマーカーの表示方法
• 検索機能とユーザーの現在位置の表示機能の実装方法

この記事を通して、RailsアプリケーションにGoogleマップを統合する基本的な手順を理解し、実際に動くマップ機能を実装できるようになったと思います。さらに、検索機能やユーザーの現在位置の表示機能など、ユーザー体験を向上させるための機能も追加できたはずです。

今後は、マップ上でのルート案内機能や、複数のマーカー間の距離計算機能など、より高度な機能の実装についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

• Google Maps JavaScript API公式ドキュメント
• Google Cloud Console - APIキーの管理
• Geocoding APIドキュメント
• Places APIドキュメント
• RailsとGoogleマップに関する技術記事