Google Maps APIを使った地図機能の開発で難しかったポイント・学び

はじめに

こんにちは、ウォンテッドリーでエンジニアをしている池田です。この記事では、Google Maps APIを使って地図機能を開発した際に困ったことと、そこから得た学びを紹介します。

背景

自分が所属するEngagementチームでは、福利厚生サービス「Perk」のグルメカテゴリに地図検索機能を追加するプロジェクトを進めていました。ユーザーが地図上で飲食店を検索し、ピンをタップして店舗詳細を確認できるような機能です。

これまでに Google Maps Platform は会社の所在地を表示するためなどに利用することはありましたが、Dynamic Maps（動的地図表示）を使ったインタラクティブな地図機能を本格的に扱うのは初めてでした。そのため、通常のWebアプリケーション開発とは異なるアプローチが必要になり、その過程で困ったことや学んだことを紹介していきます。

苦労したポイント

1. 技術選定・キャッチアップ

一点目は、Google Maps APIを使う以前に、どの地図サービスを使うかという技術選定です。Google Maps API以外にも複数の選択肢がありました。BtoB向けサービスで利用する際の価格、信頼性やUIなどを考慮して最終的にGoogle Maps APIに落ち着きました。Google Maps Platformは従量課金制でAPIの種類によって料金が大きく異なるため、どの程度のリクエストでどの程度のコストがかかるかの事前試算が必要でした。また、APIの種類が多くどのAPIが必要になるかの把握や、そのAPIでできることを把握するだけでもかなり時間がかかりました。

2. 地図特有の仕様を決めるのが難しい

二点目は、地図機能特有の仕様を決めることです。例えば以下のような点です。

ピンが重なる: 同じビルに複数の飲食店が密集しているエリアでは、店舗のマーカー同士が重なってタップできなくなる
地図を動かした後の検索: 地図を移動した後自動でマーカーを更新するようにするか、ユーザーが明示的に検索操作を行った時にマーカーを更新するようにするか

普段のWebアプリ開発ではボタンのクリックなどシンプルな操作が中心ですが、地図機能ではピンチで拡大したりスワイプで移動したりと操作の種類が多く、それぞれの振る舞いを一つ一つ決めていく必要がありました。

対策としては、事前にプロトタイプを作って実際に触ってみることで、チームのメンバーからフィードバックをもらったり、他の地図サービスと比較することが解決の糸口になりました。

ピンが重なる問題については、Google Maps APIに用意されている設定だけでは実現したい体験を満たせなかったため、自前でピンを分散させる処理を実装しました。プロトタイピングを行ったことで、密集エリアでのタップのしづらさなどがわかり、実際に対応しようと判断ができました。

地図を動かした後の検索については、自動更新にすると地図を動かすたびにリクエストが飛んでしまい、意図しないタイミングでマーカーが書き換わったり、明示的に検索を行っている感覚が損なわれるというフィードバックをもらい、再検索をするボタンを設定することでUXの改善につながりました。

3. 位置情報の取得

Perk はブラウザとモバイルアプリの両方を提供しており、モバイルアプリは Flutter + WebView で構成されています。Web 側から Flutter 側の実装を呼び出してネイティブアプリのレイヤーで位置情報取得処理を行うこともできましたが、ブラウザ版と実装を共通化し、工数を削減するためJSのレイヤーで位置情報を取得する方針を取りました。

問題になったのは権限を取得できなかった場合の対処で、OS側の位置情報権限とブラウザ側の権限は別々に管理されているため、片方だけ許可されていても動作しないケースがありました。権限の許可がされていないときの復帰方法はプラットフォームごとに異なるため、それぞれの復帰手順を調査してヘルプページを用意し、権限の問題で取得に失敗した場合にはユーザーをヘルプページに導くようにしました。

学び

今回最も効果的だったのは、プロトタイプを先に作るアプローチでした。先に設計を進めてプロトタイプを作るのではなく「プロトタイプ作成→設計→実装」の順で進めました。地図機能はピンの重なり具合やタップのしやすさなど、実際に動かしてみるまで課題が表面化しにくいという性質があるため、早い段階でプロトタイプを作って触ることで、こうした問題を事前に洗い出すことができました。最近ではプロトタイプも Claude Code ですぐに作れるようになってきているので、この辺りの課題の洗い出しも進めやすくなってきています。