C#やWebView2、Google Maps JavaScript APIの勉強も兼ねて、登山アプリから書き出したGPXファイルをWindowsアプリ上でGoogleマップに重ねて表示する小さなビューアを作りました。この記事では、作成した理由、できること、実装の考え方、使い方をまとめます。
作成した理由
一番の目的は、C#のWindowsアプリ開発、WebView2の使い方、Google Maps JavaScript APIの扱いを実際に手を動かしながら勉強することでした。せっかく作るなら、自分の趣味である登山の記録を見返す道具にしたいと思い、GPXファイルをGoogleマップ上に表示するアプリにしました。
登山やハイキングのあと、YAMAPなどで記録したルートを見返すと「どこを歩いたのか」が一気に思い出せます。ただ、GPXファイルとして保存したあとに、手元のPCでさっと地図に重ねて見たい場面がありました。
Google Earth Proに読み込む方法も便利ですが、今回はもう少し軽く、Windowsアプリを起動してGPXファイルを選ぶだけでGoogleマップ上にルートを表示できるものを、学習用の題材として作ってみました。
今回作ったもの
GPX Google Map Viewer は、GPXファイル内の座標を読み取り、Google Maps JavaScript APIで地図上にルート線として描画するWindowsアプリです。
できること
現時点では、余計な機能を増やしすぎず「GPXを開いてルートを見る」ことに絞っています。
- Google Maps APIキーを設定する
- GPXファイルを選択して読み込む
trkpt、rtept、wptの座標を取得する- Googleマップ上にオレンジ色のルート線を描画する
- 開始地点に
S、終了地点にGのマーカーを表示する - 読み込んだルート全体が画面に入るように自動で地図を調整する
使い方
このアプリでは、地図表示にGoogle Maps JavaScript APIを使っています。そのため、Google Cloud側でAPIキーを作成し、Maps JavaScript APIを有効化しておきます。
具体的には、「JavaScript HTML を使用するマーカーが配置された Google マップを追加する」に記載があります。
Google Cloudのアカウント登録が済んでいるものとして説明します。
プロジェクトを作成する
Google Cloudのメニューから「Google Maps Platform」を選択し、「プロジェクトの作成」をクリックします。
プロジェクト名を入力し、「作成」をクリックします。
APIキーが表示されるので、アプリで使用するためコピーしておきます。
APIキーの保護を設定します。
今回は自分の環境で試すため、IPアドレス制限を試しました。ただし、Maps JavaScript APIをWebView2内のHTML/JavaScriptから読み込む構成では、一般的にはHTTPリファラー制限を使う方が用途に合っています。
なお、WebView2やブラウザ上でMaps JavaScript APIを使う場合、APIキーを完全に隠すことはできません。APIキー制限は不正利用を完全に防ぐものではなく、使える場所やAPIを絞ってリスクを下げるための設定です。
不要な使用を避けるため、「Maps JavaScript API」のみを有効にし、他のAPIは無効にします。
不審な利用や想定外の課金に気づけるように、予算アラートも設定しておきます。
以上で、APIの使用開始は準備完了です。
Google Maps APIの利用料について
Google Maps JavaScript APIは従量課金のサービスです。今回のように地図を表示する場合は、主に Dynamic Maps の map load としてカウントされます。
Dynamic Mapsには月ごとの無料利用枠がありますが、その枠を超えた分は1,000回あたりの単価で課金されます。2026年6月時点の公式料金表では、Dynamic Mapsは月10,000回まで無料、10,001回から100,000回までは1,000回あたり7.00米ドルです。
個人利用であれば無料枠内に収まることも多いと思いますが、APIキーの漏えいや想定外のアクセスがあると課金につながる可能性があります。APIキー制限と予算アラートは必ず設定しておくのがおすすめです。
個人開発で気をつけたいこと
- 記事やGitHubにAPIキーを載せない
- Google Cloudの請求先アカウント（クレジットカード）が必要になる
- 無料枠を超えると課金される可能性がある
- 予算アラートや上限、APIキー制限（HTTPリファラー制限など）を設定しておく
アプリを実装する
ここからは、Visual Studio 2026を使ってWindowsアプリとして実装していきます。Visual Studio 2026 Communityは、個人開発や学習用途で使いやすい無料版のIDEです。Microsoftの公式ダウンロードページからインストーラーを取得できます。
Visual Studio 2026 Community
Visual Studio 2026をインストールする
Visual Studio Installerを起動したら、「ワークロード」で 「.NET デスクトップ開発」 を選択します。このワークロードにより、C#でWindows Formsアプリを作るために必要なツールが入ります。
Windows Formsプロジェクトを作成する
Visual Studioを起動したら、「新しいプロジェクトの作成」 から 「Windows Forms アプリ」を選択します。言語はC#、フレームワークは「 .NET 8 」を選びます。
このアプリでは、プロジェクト名を 「GpxGoogleMapViewer」 にしました。
WebView2を追加する
Googleマップはアプリ内のWebView2で表示します。Visual Studioの「ツール」ー「NuGetパッケージマネージャー」から「 Microsoft.Web.WebView2」 を追加します。
画面構成
画面は、上からメニュー、ツールバー、地図表示エリア、ステータス表示の4段に分けています。
| メニュー | 「設定」 メニューからAPIキー設定ダイアログを開きます。 |
| 地図を再読込 | Googleマップを再読み込みし、現在読み込んでいるGPXルートを再描画します。 |
| GPXを開く | ファイル選択ダイアログを表示し、選択したGPXファイルを読み込みます。 |
| 地図表示エリア（WebView2） | Google Maps JavaScript APIを読み込んだHTMLを表示します。ルート線や開始・終了マーカーもここに描画します。 |
| ステータス表示 | APIキー未設定、読み込み成功、読み込み失敗、座標数などを表示します。 |
実装のポイント
アプリ本体はC#のWinFormsで作っています。地図表示部分はWebView2を埋め込み、その中でGoogle Maps JavaScript APIを読み込んでいます。
| アプリ本体 | C# / .NET 8 / Windows Forms |
| 地図表示 | Microsoft WebView2 + Google Maps JavaScript API |
| GPX解析 | XDocument でXMLを読み込み、緯度経度を抽出 |
| 描画方法 | Google Mapsの Polyline と Marker を使用 |
GPXファイルの構造
GPXは、GPSで記録した位置情報を保存・交換するためのXML形式のファイルです。緯度・経度のほか、標高、記録時刻、地点名などを保存できます。
GPXファイルで使われる主な座標要素には、trkpt、rtept、wpt の3種類があります。
| trkpt | Track Pointの略です。GPS機器や登山アプリが実際に記録した軌跡上の地点を表します。登山中に一定間隔で記録された位置情報などが該当します。 |
| rtept | Route Pointの略です。出発前に計画したルート上の経由地点を表します。実際に歩いた軌跡ではなく、これから進む予定の道順を表す場合に使われます。 |
| wpt | Waypointの略です。山頂、登山口、休憩場所など、単独で意味を持つ地点を表します。 |
今回動作確認に使用した yamap_2026-05-16_09_02.gpx は、YAMAPから書き出したGPX 1.1形式のファイルです。このファイルには、実際に記録された軌跡を表す trkpt だけが含まれていました。
次の例は、実際のYAMAPファイルの構造を読みやすいように改行し、座標値を丸めて一部だけ抜粋したものです。
<?xml version="1.0" encoding="UTF-8"?>
<gpx creator="YAMAP - https://yamap.com"
version="1.1"
xmlns="http://www.topografix.com/GPX/1/1"> <!-- GPX 1.1の名前空間 -->
<metadata> <!-- ファイル全体の情報 -->
<bounds minlat="35.3058" minlon="139.3085"
maxlat="35.3246" maxlon="139.3256" /> <!-- 軌跡全体を囲む範囲 -->
</metadata>
<trk> <!-- 実際に記録した軌跡全体 -->
<name /> <!-- このファイルでは名前は空 -->
<number>1</number> <!-- トラック番号 -->
<trkseg> <!-- 連続した軌跡のまとまり -->
<trkpt lat="35.3112" lon="139.3136"> <!-- 軌跡上の1地点 -->
<ele>23.6657</ele> <!-- 標高。単位はメートル -->
<time>2026-05-16T00:03:17Z</time> <!-- UTCで記録された時刻 -->
</trkpt>
<trkpt lat="35.3113" lon="139.3138"> <!-- 次に記録された地点 -->
<ele>24.2603</ele>
<time>2026-05-16T00:03:34Z</time>
</trkpt>
<!-- 同じ形式のtrkptが合計405点続く -->
</trkseg>
</trk>
</gpx>GPXから座標を取り出す
実装では、GPX内にある trkpt、rtept、wpt を探して、各要素の lat 属性から緯度、lon 属性から経度を読み取っています。
document // 読み込んだGPXのXML文書
.Descendants() // 文書内にあるすべての子孫要素を取得
.Where(element => element.Name.LocalName is "trkpt" or "rtept" or "wpt")
// 座標を持つ要素だけを抽出
.Select(TryReadPoint) // 各要素から緯度・経度を読み取る
.Where(point => point is not null) // 読み取りに成功した座標だけを残す
.Cast<GpxPoint>() // GpxPoint型の一覧へ変換
.ToList(); // List<GpxPoint>として確定地図側へ座標を渡す
読み込んだ座標リストはJSONにしてWebView2内のJavaScriptへ渡します。JavaScript側では window.drawGpxTrack(points) を呼び出し、地図上にルート線と開始・終了マーカーを描画します。
trackLine = new google.maps.Polyline({ // GPXルートを表す線を作成
path, // GPXから取得した緯度・経度の配列
geodesic: true, // 地球の曲面に沿って線を描画
strokeColor: "#d97706", // ルート線をオレンジ色に設定
strokeOpacity: 0.95, // ルート線の透明度を設定
strokeWeight: 5 // ルート線の太さを設定
}); // Polylineの設定を終了
trackLine.setMap(map); // 作成したルート線を地図上に表示まとめ
今回は、学習の目的で登山後にルートを見返すための小さなWindowsアプリとして、作ってみました。たいしたアプリではありませんが、自分の用途に合わせて道具を作れるのはやっぱり楽しいです。
コメント