🗼

GooleMapデザインカスタマイズ

nmurata

2023/12/28に公開

Google Map

tech

こんにちは、スペースマーケットでモバイルエンジニアをしている村田です。

最近友人と初めてLUUPの電動キックボードにライドしました、めっちゃ楽しいですね（最初は思った以上に速くてビビりました）LUUPアプリ自体初めてインストールして触ったのですが、ベースとなるマップの色合いが可愛い！！！！
そういえばスペースマーケットアプリのマップはSDKデフォルトで愛着湧かないな、と感じてデザインカスタマイズしたい欲が湧いて今回試しにイジってみました。

アプリのマップについて

ゲストアプリのマップは地図検索画面にてそれぞれiOSはMapKit、AndroidはGooleMapを利用しています。MapKitは現在地青丸やピンの色変更ぐらいしかスタイル干渉できない（他もできたらすみません）気がしたので、GoogleMapのスタイルを対象にしました。

Google Maps APIs Styling Wizard

GoogleMapのスタイル調整はWEBツール「Styling Wizard」で簡単に行えるようだったので、こちらを利用して作成しました。

Styling Wizard 使い方

初期表示

Styling Wizardへアクセスすると、Cloudベースのマップスタイル設定に関する案内が表示されます（2023年12月時点）が「Use the legacy JSON styling wizard」をタップして閉じます。

住所

右上の検索ボックスより住所を入力し、任意のスポットを表示してスタイルを調整します

スタイルカスタマイズ

📊 Adjust density of features

表示項目の密度ををコントロールできます

Roads: 道路
Landmarks: 施設や店舗等のランドマークアイコン
Labels: 施設名や道路名等の文字

例えばLabelsスライダーを０（１番左）に設定すると、文字情報が全て非表示になります

🎨 Select theme

デフォルトのStandard以外に5つのテーマが用意されています。最終的なスタイルに近い方向性のものを選択し、ベースとして調整していくのが良さそうです

Silver	Retro	Dark

Night	Aubergine

⚙️ More Options

より細かく自由に各パラメータをカスタマイズしたい場合、サイドバー最下部の「More Options」を押下してAdvancedへ切り替えます。

More Options ボタン	タップ後切り替え

例えば、以下の設定をすると添付画像のように国道と高速道路以外の道路が赤く表示されます

Feature type: Road（Local）
Element Type: Geometry
Stylers
- Visibility: inherit
- Color #ff3d3d
- Weight: 1

完成スタイル

サードインパクト後のGoogleMapってこうなるだろうな、とイメージして作成しました。
自分先月から十条に住んでいるのですが、生活圏内真っ赤なのウケますね

JSON書き出し

サイドバー最下部の「FINISH」ボタンを押下するとポップアップが表示され、「Copy JSON」ボタンを押下することで作成したスタイルのJSONコードがコピーされます。

FINISH	Copy JSON

AndroidアプリGoogleMapスタイル反映

実際に作成したスタイルをスペースマーケットAndroidアプリのマップへ反映してみます

JSONファイル設置

JSONファイルを res/raw 内へ追加します。ファイル名は map_style.json としました

GoogleMapへスタイル指定

地図検索画面のUIはJetpack Composeで作られています。以下記事でも言及しているので合わせて読んでいただけると嬉しいです！

MapProperties パラメータの mapStyleOptions へ、先ほど追加したJSONファイルを指定するだけで実装完了です

 GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState,
    properties = MapProperties(
        isMyLocationEnabled = isLocationEnabled,
+       mapStyleOptions = MapStyleOptions.loadRawResourceStyle(context, R.raw.map_style)
    ),
    uiSettings = MapUiSettings(
        compassEnabled = true,
        mapToolbarEnabled = false
    ),
    onMapClick = { onClearFocus() }
)

スタイル反映地図検索画面

スタイル反映前後の地図検索画面スクショになります。自分が作成したスタイルが反映されて気持ち良い！今後社内のデザイナーに相談しながらスペースマーケットのデザインに最適化したスタイルを作成したいですね

Before	After

最後に

スペースマーケットでは一緒に働く仲間を募集中です！逃げちゃダメだ！！！！！
詳しくは以下をご確認の上ご応募ください。

GitHubで編集を提案

スペースマーケット Engineer BlogPublication

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket