Map

サンプルを参照します。サンプルを参照する

.NET マルチプラットフォームアプリ UI (.NET MAUI) Map コントロールは、マップを表示および注釈付けするためのクロスプラットフォームビューです。 Map コントロールは、各プラットフォームでネイティブマップコントロールを使用し、Microsoft.Maui.Controls.Maps NuGet パッケージによって提供されます。

Important

Map コントロールは、WinUI にマップコントロールがないため、Windows ではサポートされていません。ただし、 CommunityToolkit.Maui.Maps NuGet パッケージは、Windows 上の WebView を介して Bing Maps へのアクセスを提供します。詳細については、「作業の開始」を参照してください。

セットアップ

Map コントロールは、各プラットフォームのネイティブマップコントロールを使用します。これにより、ユーザーにすばやく使い慣れたマップエクスペリエンスが提供されますが、各プラットフォーム API の要件に準拠するために一部の構成手順が必要であることを意味します。

マップの初期化

Map コントロールは、.NET MAUI アプリプロジェクトに追加する必要がある Microsoft.Maui.Controls.Maps NuGet パッケージによって提供されます。

NuGet パッケージをインストールした後、UseMauiMaps クラスのMauiAppBuilder メソッドのCreateMauiApp オブジェクトに対してMauiProgram メソッドを呼び出して、アプリで初期化する必要があります。

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .UseMauiMaps();

        return builder.Build();
    }
}

NuGet パッケージが追加および初期化されると、 Map API をプロジェクトで使用できるようになります。

注

Map は Map と競合する可能性があります (ネイティブマップアプリを起動するための Map.OpenAsync を提供します)。どちらの型も暗黙的な使用によって一般的に使用でき、コードで Map を使用すると、 error CS0104: 'Map' is an ambiguous reference コンパイラエラーが発生する可能性があります。これを解決するには、競合が発生した C# ファイルに名前空間エイリアスを追加します。

using Map = Microsoft.Maui.Controls.Maps.Map;

その後、 Map を使用して、そのファイル全体のコントロールマップを参照できます。

プラットフォームの構成

マップが表示される前に、Android で追加の構成が必要です。さらに、iOS、Android、Mac Catalyst では、ユーザーの場所にアクセスするには、アプリに位置情報のアクセス許可が付与されている必要があります。

iOS と Mac Catalyst

iOS および Mac Catalyst でマップを表示および操作する場合、追加の構成は必要ありません。ただし、位置情報サービスにアクセスするには、 Info.plist で必要な場所サービス要求を設定する必要があります。これらは通常、次の 1 つ以上になります。

NSLocationAlwaysAndWhenInUseUsageDescription – 位置情報サービスを常に使用する場合。
NSLocationWhenInUseUsageDescription – アプリが使用中の場合に位置情報サービスを使用する場合。

詳細については、developer.apple.com で要求するロケーション・サービス権限の選択を参照してください。

Info.plist のこれらのキーの XML 表現を次に示します。アプリで位置情報がどのように使用されているかを反映するように、 string の値を更新する必要があります。

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Can we use your location at all times?</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Can we use your location when your app is being used?</string>

アプリがユーザーの場所へのアクセスを試み、アクセスを要求すると、プロンプトが表示されます。

Android

Android でマップを表示および操作するための構成プロセスは次のとおりです。

Google Maps API キーを取得し、アプリマニフェストに追加します。
マニフェストで Google Play サービスのバージョン番号を指定します。
[省略可能]マニフェストで場所のアクセス許可を指定します。
[省略可能]マニフェストでWRITE_EXTERNAL_STORAGEアクセス許可を指定します。

Google Maps API キーを取得する

Android で Map コントロールを使用するには、api キーを生成する必要があります。API キーは、コントロールが Android に依存する Map によって使用されます。これを行うには、「 Google Cloud Console で設定する」の手順に従い、developers.google.com で API キーを使用します。

API キーを取得したら、<application>メタデータの値として指定して、Platforms/Android/AndroidManifest.xml ファイルのcom.google.android.geo.API_KEY要素内に追加する必要があります。

<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
  <meta-data android:name="com.google.android.geo.API_KEY" android:value="PASTE-YOUR-API-KEY-HERE" />
</application>

これにより、API キーがマニフェストに埋め込まれます。有効な API キーがないと、 Map コントロールに空白のグリッドが表示されます。

注

com.google.android.geo.API_KEY は、API キーに推奨されるメタデータ名です。この名前のキーを使用して、Android 上の複数の Google Maps ベースの API に対する認証を行うことができます。下位互換性のために、 com.google.android.maps.v2.API_KEY メタデータ名を使用できますが、Android Maps API v2 への認証のみが許可されます。アプリで指定できる API キーメタデータ名は 1 つだけです。

Google Play サービスのバージョン番号を指定する

AndroidManifest.xmlの <application> 要素内に次の宣言を追加します。

<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />

これにより、アプリがコンパイルされた Google Play サービスのバージョンがマニフェストに埋め込まれます。

場所のアクセス許可を指定する

アプリがユーザーの場所にアクセスする必要がある場合は、ACCESS_COARSE_LOCATION要素の子として、ACCESS_FINE_LOCATIONまたは<manifest>アクセス許可 (またはその両方) をマニフェストに追加してアクセス許可を要求する必要があります。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  ...
  <!-- Required to access the user's location -->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

ACCESS_COARSE_LOCATIONアクセス許可を使用すると、API は WiFi またはモバイルデータまたはその両方を使用して、デバイスの場所を決定できます。 ACCESS_FINE_LOCATIONアクセス許可を使用すると、API はグローバル位置情報システム (GPS)、WiFi、またはモバイルデータを使用して、正確な場所を可能な限り特定できます。

アプリがユーザーの場所へのアクセスを試み、アクセスを要求すると、プロンプトが表示されます。

または、Visual Studio の Android マニフェストエディターでこれらのアクセス許可を有効にすることもできます。

WRITE_EXTERNAL_STORAGE権限を指定する

アプリが API 22 以下を対象とする場合は、WRITE_EXTERNAL_STORAGE要素の子として、マニフェストに<manifest>アクセス許可を追加する必要があります。

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

これは、アプリが API 23 以上を対象とする場合は必要ありません。

地図操作

Map クラスは、マップの外観と動作を制御する次のプロパティを定義します。

IsShowingUserは、 bool型で、マップにユーザーの現在の場所が表示されているかどうかを示します。
ItemsSource は IEnumerable 型で、表示するピン項目のコレクションとして IEnumerable を指定します。
ItemTemplate: DataTemplate型。表示されるピンのコレクション内の各項目に適用する DataTemplate を指定します。
ItemTemplateSelector: DataTemplateSelector 型。実行時にピンのDataTemplateSelectorを選択するために使用されるDataTemplateを指定します。
IsScrollEnabledは、 bool型で、マップのスクロールを許可するかどうかを決定します。
IsTrafficEnabledは、 bool型で、トラフィックデータがマップ上にオーバーレイされているかどうかを示します。
IsZoomEnabledは、 bool型で、マップにズームを許可するかどうかを決定します。
MapElementsは、 IList<MapElement>タイプで、多角形やポリラインなどのマップ上の要素のリストを表します。
MapType( MapType 型) は、マップの表示スタイルを示します。
Pinsは、 IList<Pin> 型で、マップ上のピンの一覧を表します。
VisibleRegionは、 MapSpan型で、マップの現在表示されている領域を返します。

これらのプロパティは、 MapElements、 Pins、および VisibleRegion プロパティを除き、 BindableProperty オブジェクトによってサポートされます。つまり、データバインディングのターゲットにすることができます。

Map クラスは、マップがタップされたときに発生するMapClicked イベントも定義します。イベントに付随するMapClickedEventArgs オブジェクトには、Location型の Location という名前の 1 つのプロパティがあります。イベントが発生すると、 Location プロパティはタップされたマップの場所に設定されます。 Location クラスの詳細については、「場所と距離」を参照してください。

ItemsSource、ItemTemplate、およびItemTemplateSelectorプロパティの詳細については、「ピンコレクションの表示」を参照してください。

マップを表示する

Mapは、レイアウトまたはページに追加することで表示できます。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps">
    <maps:Map x:Name="map" />
</ContentPage>

同等の C# コードは次のとおりです。

using Map = Microsoft.Maui.Controls.Maps.Map;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

この例では、既定の Map コンストラクターを呼び出します。このコンストラクターは、ハワイのマウイ島にマップを中央に置きます。

既定の場所を含むマップコントロールのスクリーンショット。

または、 MapSpan 引数を Map コンストラクターに渡して、マップの読み込み時の中心点とズームレベルを設定することもできます。詳細については、「マップに特定の場所を表示する」を参照してください。

Important

.NET MAUI には、MapとMicrosoft.Maui.Controls.Maps.Mapの 2 つのMicrosoft.Maui.ApplicationModel.Map型があります。 Microsoft.Maui.ApplicationModel名前空間は .NET MAUI のglobal using ディレクティブの 1 つであるため、コードからMicrosoft.Maui.Controls.Maps.Map コントロールを使用する場合は、Mapの使用法を完全に修飾するか、using エイリアスを使用する必要があります。

マップの種類

Map.MapType プロパティをMapType列挙メンバーに設定して、マップの表示スタイルを定義できます。 MapType 列挙型には、次のメンバーが定義されています。

Street は、ストリートマップが表示されることを指定します。
Satellite は、衛星画像を含むマップを表示することを指定します。
Hybrid は、道路データと衛星データを組み合わせたマップを表示することを指定します。

既定では、Map プロパティが未定義の場合、MapTypeはストリートマップを表示します。または、 MapType プロパティを MapType 列挙メンバーのいずれかに設定することもできます。

<maps:Map MapType="Satellite" />

同等の C# コードは次のとおりです。

Map map = new Map
{
    MapType = MapType.Satellite
};

マップ上の特定の場所を表示する

マップの読み込み時に表示するマップの領域は、MapSpan コンストラクターにMap引数を渡すことによって設定できます。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map>
        <x:Arguments>
            <maps:MapSpan>
                <x:Arguments>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>36.9628066</x:Double>
                            <x:Double>-122.0194722</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    <x:Double>0.01</x:Double>
                    <x:Double>0.01</x:Double>
                </x:Arguments>
            </maps:MapSpan>
        </x:Arguments>
    </maps:Map>
</ContentPage>

同等の C# コードは次のとおりです。

using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Location location = new Location(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(location, 0.01, 0.01);
Map map = new Map(mapSpan);

次の使用例は、Map オブジェクトで指定された領域を示すMapSpan オブジェクトを作成します。 MapSpan オブジェクトは、Location オブジェクトで表される緯度と経度を中心とし、緯度 0.01 度と経度 0.01 度にまたがるオブジェクトです。 Location クラスの詳細については、「場所と距離」を参照してください。 XAML で引数を渡す方法については、「XAML で引数を渡す」を参照してください。

その結果、マップが表示されると、特定の場所の中央に配置され、特定の緯度と経度の度数にまたがることが示されます。

指定した場所を持つマップコントロールのスクリーンショット。

MapSpan オブジェクトを作成する

MapSpanオブジェクトを作成するには、いくつかの方法があります。一般的な方法は、 MapSpan コンストラクターに必要な引数を指定することです。これらは、Location オブジェクトによって表される緯度と経度、およびdoubleでスパンされる緯度と経度の度を表すMapSpan値です。 Location クラスの詳細については、「場所と距離」を参照してください。

または、 MapSpan クラスには、新しい MapSpan オブジェクトを返す 3 つのメソッドがあります。

ClampLatitudeは、メソッドのクラスインスタンスと同じMapSpanを持つLongitudeDegreesと、そのnorthおよびsouth引数によって定義された半径を返します。
FromCenterAndRadiusは、MapSpan引数とLocation引数によって定義されたDistanceを返します。
WithZoomは、メソッドのクラスインスタンスと同じ中心を持ち、半径にMapSpan引数を乗算したdoubleを返します。

Distance構造体の詳細については、「場所と距離」を参照してください。

MapSpanが作成されたら、次のプロパティにアクセスして、それに関するデータを取得できます。

Center型のLocationで、MapSpanの地理的中心の位置を表します。
LatitudeDegrees: double型。これは、 MapSpanでスパンされる緯度の角度を表します。
LongitudeDegrees、double 型で、MapSpan によってスパンされる経度の度数を表します。
Radiusは、Distance半径を表すMapSpan型です。

マップを移動する

Map.MoveToRegionメソッドを呼び出して、マップの位置とズームレベルを変更できます。このメソッドは、表示するマップの領域とそのズームレベルを定義する MapSpan 引数を受け取ります。

次のコードは、表示されている領域をマップ上に移動する例を示しています。

using Microsoft.Maui.Maps;
using Microsoft.Maui.Controls.Maps.Map;
...

MapSpan mapSpan = MapSpan.FromCenterAndRadius(location, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

マップをズームする

Mapのズームレベルは、位置を変更せずに変更できます。これは、マップ UI を使用するか、現在の場所をMoveToRegion引数として使用するMapSpan引数を使用してLocation メソッドを呼び出すことによってプログラム的に実現できます。

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

この例では、MoveToRegion メソッドは、MapSpan プロパティを使用してマップの現在の位置を指定するMap.VisibleRegion引数と、ズームレベルを緯度と経度の度として呼び出します。結果として、マップのズームレベルは変更されますが、その位置は変更されません。マップにズームを実装する別の方法は、 MapSpan.WithZoom メソッドを使用してズーム係数を制御することです。

Important

マップ UI またはプログラムを使用してマップをズームするには、 Map.IsZoomEnabled プロパティが trueされている必要があります。このプロパティの詳細については、「ズームを無効にする」を参照してください。

マップの動作をカスタマイズする

Mapの動作は、プロパティの一部を設定し、MapClicked イベントを処理することによってカスタマイズできます。

注

追加のマップ動作のカスタマイズは、そのハンドラーをカスタマイズすることで実現できます。詳細については、「ハンドラーを使用してコントロールをカスタマイズする」を参照してください。

トラフィックデータを表示する

Map クラスは、IsTrafficEnabled型のbool プロパティを定義します。既定では、このプロパティは false であり、トラフィックデータがマップ上にオーバーレイされていないことを示します。このプロパティを true に設定すると、トラフィックデータがマップ上にオーバーレイされます。

<maps:Map IsTrafficEnabled="true" />

同等の C# コードは次のとおりです。

Map map = new Map
{
    IsTrafficEnabled = true
};

スクロールを無効にする

Map クラスは、IsScrollEnabled型のbool プロパティを定義します。既定では、このプロパティは true であり、マップのスクロールが許可されていることを示します。このプロパティが false に設定されている場合、マップはスクロールしません。

<maps:Map IsScrollEnabled="false" />

同等の C# コードは次のとおりです。

Map map = new Map
{
    IsScrollEnabled = false
};

ズームを無効にする

Map クラスは、IsZoomEnabled型のbool プロパティを定義します。既定では、このプロパティは true であり、マップでズームを実行できることを示します。このプロパティを false に設定すると、マップを拡大することはできません。

<maps:Map IsZoomEnabled="false" />

同等の C# コードは次のとおりです。

Map map = new Map
{
    IsZoomEnabled = false
};

ユーザーの場所を表示する

Map クラスは、IsShowingUser型のbool プロパティを定義します。既定では、このプロパティは false であり、マップにユーザーの現在の場所が表示されていないことを示します。このプロパティを true に設定すると、マップにユーザーの現在の場所が表示されます。

<maps:Map IsShowingUser="true" />

同等の C# コードは次のとおりです。

Map map = new Map
{
    IsShowingUser = true
};

Important

ユーザーの場所にアクセスするには、場所のアクセス許可がアプリケーションに付与されている必要があります。詳細については、「プラットフォームの構成」を参照してください。

マップクリック

Map クラスは、マップがタップされたときに発生するMapClicked イベントを定義します。イベントに付随するMapClickedEventArgs オブジェクトには、Location型の Location という名前の 1 つのプロパティがあります。イベントが発生すると、 Location プロパティはタップされたマップの場所に設定されます。 Location クラスの詳細については、「場所と距離」を参照してください。

次のコード例は、 MapClicked イベントのイベントハンドラーを示しています。

void OnMapClicked(object sender, MapClickedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine($"MapClick: {e.Location.Latitude}, {e.Location.Longitude}");
}

この例では、 OnMapClicked イベントハンドラーは、タップされたマップの場所を表す緯度と経度を出力します。イベントハンドラーは、 MapClicked イベントに登録する必要があります。

<maps:Map MapClicked="OnMapClicked" />

同等の C# コードは次のとおりです。

Map map = new Map();
map.MapClicked += OnMapClicked;

場所と距離

Microsoft.Maui.Devices.Sensors名前空間には、マップとそのピンを配置するときに通常使用されるLocation クラスが含まれています。 Microsoft.Maui.Maps名前空間には、マップの配置時に必要に応じて使用できるDistance構造体が含まれています。

場所

Location クラスは、緯度と経度の値として格納された場所をカプセル化します。このクラスは、次のプロパティを定義します。

Accuracyは、double?の水平方向の精度をメートル単位で表すLocation型のです。
Altitude: double?型。 AltitudeReferenceSystem プロパティで指定された参照システムの高度をメートル単位で表します。
AltitudeReferenceSystem: AltitudeReferenceSystem型。高度値を指定する参照システムを指定します。
Course: double? 型。真北に対する度数の値を示します。
IsFromMockProvider: bool型。これは、場所が GPS またはモックロケーションプロバイダーからのものであるかどうかを示します。
Latitude: double型。位置の緯度を 10 進度で表します。
Longitude: double型。位置の経度を 10 進度で表します。
Speed: double?型。1 秒あたりの速度をメートル単位で表します。
Timestamp: DateTimeOffset型。これは、 Location が作成されたときのタイムスタンプを表します。
VerticalAccuracyは、double?の垂直方向の精度をメートル単位で指定するLocation型の > です。

Location オブジェクトは、 Location コンストラクターオーバーロードのいずれかを使用して作成されます。通常は、 double 値として指定された最小緯度と経度の引数が必要です。

Location location = new Location(36.9628066, -122.0194722);

Location オブジェクトを作成すると、緯度の値は -90.0 から 90.0 の間でクランプされ、経度値は -180.0 から 180.0 の間でクランプされます。

注

GeographyUtils クラスには、ToRadians値を度からラジアンに変換するdouble拡張メソッドと、ToDegrees値をラジアンから度に変換するdouble拡張メソッドがあります。

Location クラスには、2 つの場所間の距離を計算するCalculateDistanceメソッドもあります。

距離

Distance構造体は、距離をメートル単位で表すdouble値として格納された距離をカプセル化します。この構造体は、次の 3 つの読み取り専用プロパティを定義します。

Kilometers、double型は、Distanceによってカバーされる距離をキロメートルで表します。
Meters は double 型で、Distance でスパンされる距離をメートル単位で表します。
Miles は double 型であり、Distance によってスパンされる距離をマイル単位で表します。

Distance オブジェクトは、 Distance コンストラクターを使用して作成できます。これには、 doubleとして指定されたメートル引数が必要です。

Distance distance = new Distance(1450.5);

または、 Distance オブジェクトは、 FromKilometers、 FromMeters、 FromMiles、および BetweenPositions ファクトリメソッドを使用して作成できます。

Distance distance1 = Distance.FromKilometers(1.45); // argument represents the number of kilometers
Distance distance2 = Distance.FromMeters(1450.5);   // argument represents the number of meters
Distance distance3 = Distance.FromMiles(0.969);     // argument represents the number of miles
Distance distance4 = Distance.BetweenPositions(location1, location2);

ピン

Map コントロールを使用すると、場所をPinオブジェクトでマークできます。 Pinは、タップしたときに情報ウィンドウを開くマップマーカーです。

マップピンとその情報ウィンドウのスクリーンショット。

Pin オブジェクトが Map.Pins コレクションに追加されると、マップ上にピンがレンダリングされます。

Pin クラスには次のプロパティがあります。

Addressは、 string型で、通常はピン位置のアドレスを表します。ただし、アドレスだけでなく、 string コンテンツでもかまいません。
Labelはstring型で、通常ピンタイトルを表します。
Locationは、ピンの緯度と経度を表す Location型です。
Typeは、ピンの種類を表す PinType型です。

これらのプロパティは、 BindableProperty オブジェクトによってサポートされます。つまり、 Pin をデータバインディングのターゲットにすることができます。オブジェクト Pin データバインディングの詳細については、「ピンコレクションの表示」を参照してください。

さらに、 Pin クラスは MarkerClicked イベントと InfoWindowClicked イベントを定義します。 MarkerClicked イベントは、ピンがタップされたときに発生し、情報ウィンドウがタップされたときにInfoWindowClicked イベントが発生します。両方のイベントに付随するPinClickedEventArgs オブジェクトには、HideInfoWindow型の 1 つのbool プロパティがあります。

ピンを表示する

Pin を Map に XAML で追加できます。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map x:Name="map">
        <x:Arguments>
            <maps:MapSpan>
                <x:Arguments>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>36.9628066</x:Double>
                            <x:Double>-122.0194722</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    <x:Double>0.01</x:Double>
                    <x:Double>0.01</x:Double>
                </x:Arguments>
            </maps:MapSpan>
        </x:Arguments>
        <maps:Map.Pins>
            <maps:Pin Label="Santa Cruz"
                      Address="The city with a boardwalk"
                      Type="Place">
                <maps:Pin.Location>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>36.9628066</x:Double>
                            <x:Double>-122.0194722</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                </maps:Pin.Location>
            </maps:Pin>
        </maps:Map.Pins>
    </maps:Map>
</ContentPage>

この XAML は、Map オブジェクトによって指定された領域を示すMapSpan オブジェクトを作成します。 MapSpan オブジェクトは、緯度と経度の 0.01 度を拡張するLocation オブジェクトで表される緯度と経度を中心にしています。 Pin オブジェクトがMap.Pins コレクションに追加され、Map プロパティで指定された位置にあるLocationに描画されます。 Location クラスの詳細については、「場所と距離」を参照してください。既定のコンストラクターがないオブジェクトに XAML の引数を渡す方法については、「 XAML で引数を渡す」を参照してください。

同等の C# コードは次のとおりです。

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Map map = new Map
{
  ...
};

Pin pin = new Pin
{
  Label = "Santa Cruz",
  Address = "The city with a boardwalk",
  Type = PinType.Place,
  Location = new Location(36.9628066, -122.0194722)
};
map.Pins.Add(pin);

次のコード例では、1 つのピンがマップにレンダリングされます。

マップピンのスクリーンショット。

ピンを操作する

既定では、 Pin がタップされると、情報ウィンドウが表示されます。

マップピンとその情報ウィンドウのスクリーンショット。

マップ上の別の場所をタップすると、情報ウィンドウが閉じます。

Pin クラスは、MarkerClickedがタップされたときに発生するPin イベントを定義します。このイベントを処理して情報ウィンドウを表示する必要はありません。代わりに、特定のピンがタップされたことを通知する必要がある場合は、このイベントを処理する必要があります。

Pin クラスは、情報ウィンドウがタップされたときに発生するInfoWindowClicked イベントも定義します。このイベントは、特定の情報ウィンドウがタップされたことを通知する必要がある場合に処理する必要があります。

次のコードは、これらのイベントの処理例を示しています。

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Pin boardwalkPin = new Pin
{
    Location = new Location(36.9641949, -122.0177232),
    Label = "Boardwalk",
    Address = "Santa Cruz",
    Type = PinType.Place
};
boardwalkPin.MarkerClicked += async (s, args) =>
{
    args.HideInfoWindow = true;
    string pinName = ((Pin)s).Label;
    await DisplayAlert("Pin Clicked", $"{pinName} was clicked.", "Ok");
};

Pin wharfPin = new Pin
{
    Location = new Location(36.9571571, -122.0173544),
    Label = "Wharf",
    Address = "Santa Cruz",
    Type = PinType.Place
};
wharfPin.InfoWindowClicked += async (s, args) =>
{
    string pinName = ((Pin)s).Label;
    await DisplayAlert("Info Window Clicked", $"The info window was clicked for {pinName}.", "Ok");
};

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Pin boardwalkPin = new Pin
{
    Location = new Location(36.9641949, -122.0177232),
    Label = "Boardwalk",
    Address = "Santa Cruz",
    Type = PinType.Place
};
boardwalkPin.MarkerClicked += async (s, args) =>
{
    args.HideInfoWindow = true;
    string pinName = ((Pin)s).Label;
    await DisplayAlertAsync("Pin Clicked", $"{pinName} was clicked.", "Ok");
};

Pin wharfPin = new Pin
{
    Location = new Location(36.9571571, -122.0173544),
    Label = "Wharf",
    Address = "Santa Cruz",
    Type = PinType.Place
};
wharfPin.InfoWindowClicked += async (s, args) =>
{
    string pinName = ((Pin)s).Label;
    await DisplayAlertAsync("Info Window Clicked", $"The info window was clicked for {pinName}.", "Ok");
};

両方のイベントに付随するPinClickedEventArgs オブジェクトには、HideInfoWindow型の 1 つのbool プロパティがあります。このプロパティがイベントハンドラー内で true に設定されている場合、情報ウィンドウは非表示になります。

ピンの種類

Pinオブジェクトには、ピンの種類を表すType型のPinType プロパティが含まれます。 PinType 列挙型には、次のメンバーが定義されています。

Genericは汎用ピンを表します。
Placeは、場所のピンを表します。
SavedPinは、保存された場所のピンを表します。
SearchResultは検索結果のピンを表します。

ただし、 Pin.Type プロパティを PinType メンバーに設定しても、レンダリングされるピンの外観は変更されません。代わりに、ピンの外観をカスタマイズするには、 Pin ハンドラーをカスタマイズする必要があります。ハンドラーのカスタマイズの詳細については、「ハンドラーを使用してコントロールをカスタマイズする」を参照してください。

ピンコレクションを表示する

Map クラスは、次のバインド可能なプロパティを定義します。

ItemsSource は IEnumerable 型で、表示するピン項目のコレクションとして IEnumerable を指定します。
ItemTemplate: DataTemplate型。表示されるピンのコレクション内の各項目に適用する DataTemplate を指定します。
ItemTemplateSelector: DataTemplateSelector 型。実行時にピンのDataTemplateSelectorを選択するために使用されるDataTemplateを指定します。

Important

ItemTemplate プロパティは、ItemTemplateプロパティとItemTemplateSelector プロパティの両方が設定されている場合に優先されます。

データバインディングを使用してMap プロパティをItemsSource コレクションにバインドすることで、IEnumerableにピンを設定できます。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps">    
    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Positions}">
            <maps:Map.ItemTemplate>
                <DataTemplate x:DataType="models:Position">
                    <maps:Pin Location="{Binding Location}"
                              Address="{Binding Address}"
                              Label="{Binding Description}" />
                </DataTemplate>    
            </maps:Map.ItemTemplate>
        </maps:Map>
        ...
    </Grid>
</ContentPage>

ItemsSource プロパティデータは、接続されたビューモデルのPositions プロパティにバインドされ、カスタム型であるObservableCollectionオブジェクトのPositionが返されます。各Position オブジェクトは、Address型のDescriptionプロパティとstringプロパティ、およびLocation型のLocationプロパティを定義します。

IEnumerable コレクション内の各項目の外観は、ItemTemplate プロパティを、データが適切なプロパティにバインドするDataTemplate オブジェクトを含むPinに設定することによって定義されます。

次のスクリーンショットは、Mapがデータバインディングを使用してPinコレクションを表示している様子を示しています。

データバインドピンを含むマップのスクリーンショット。

実行時にアイテムの外観を選択する

IEnumerable コレクション内の各項目の外観は、ItemTemplateSelector プロパティをDataTemplateSelectorに設定することで、項目の値に基づいて実行時に選択できます。

<ContentPage ...
             xmlns:templates="clr-namespace:WorkingWithMaps.Templates"
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:viewmodels="clr-namespace:WorkingWithMaps.ViewModels"
             x:DataType="viewmodels:PinItemsSourcePageViewModel">
    <ContentPage.Resources>
       <templates:MapItemTemplateSelector x:Key="MapItemTemplateSelector">
           <templates:MapItemTemplateSelector.DefaultTemplate>
               <DataTemplate x:DataType="models:Position">
                   <maps:Pin Location="{Binding Location}"
                             Address="{Binding Address}"
                             Label="{Binding Description}" />
               </DataTemplate>
           </templates:MapItemTemplateSelector.DefaultTemplate>
           <templates:MapItemTemplateSelector.SanFranTemplate>
               <DataTemplate x:DataType="models:Position">
                   <maps:Pin Location="{Binding Location}"
                             Address="{Binding Address}"
                             Label="Xamarin!" />
               </DataTemplate>
           </templates:MapItemTemplateSelector.SanFranTemplate>    
       </templates:MapItemTemplateSelector>
    </ContentPage.Resources>

    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Positions}"
                  ItemTemplateSelector="{StaticResource MapItemTemplateSelector}">
        ...
    </Grid>
</ContentPage>

次の例は、MapItemTemplateSelector クラスを示しています。

using WorkingWithMaps.Models;

namespace WorkingWithMaps.Templates;

public class MapItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate SanFranTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Position)item).Address.Contains("San Francisco") ? SanFranTemplate : DefaultTemplate;
    }
}

MapItemTemplateSelector クラスは、異なるデータテンプレートに設定されるDefaultTemplateプロパティとSanFranTemplateDataTemplateプロパティを定義します。 OnSelectTemplate メソッドは、SanFranTemplateを返します。項目に "San Francisco" を含むアドレスがある場合、Pinをタップするとラベルとして "Xamarin" が表示されます。項目に "San Francisco" を含むアドレスがない場合、 OnSelectTemplate メソッドは DefaultTemplateを返します。

注

この機能のユースケースは、サブクラス化された Pin オブジェクトのプロパティを、 Pin のサブタイプに基づいて異なるプロパティにバインドすることです。

データテンプレートセレクターの詳細については、「 DataTemplateSelector の作成」を参照してください。

多角形、ポリライン、および円

Polygon、 Polyline、および Circle 要素を使用すると、マップ上の特定の領域を強調表示できます。 Polygonは、塗りとストローク色を設定できる完全に囲まれた図形です。 Polylineは、領域を完全に囲まない線です。 Circleでは、マップの円形領域が強調表示されます。

マップ上の多角形とポリライン。マップ上の円。

Polygon、Polyline、およびCircleクラスは、次のバインド可能なプロパティを公開するMapElement クラスから派生します。

StrokeColor は、線の色を決定する Color オブジェクトです。
StrokeWidth は、線の幅を決定する float オブジェクトです。

Polygon クラスは、追加のバインド可能なプロパティを定義します。

FillColor は、多角形の背景色を決定する Color オブジェクトです。

さらに、PolygonクラスとPolyline クラスの両方で、図形のポイントを指定するGeoPath オブジェクトのリストであるLocation プロパティを定義します。

Circle クラスは、次のバインド可能なプロパティを定義します。

Center は、円の中心を緯度と経度で定義する Location オブジェクトです。
Radius は、円の半径をメートル、キロメートル、またはマイル単位で定義する Distance オブジェクトです。
FillColor は、円の周囲の色を決定する Color プロパティです。

多角形を作成する

Polygon オブジェクトをマップに追加するには、そのオブジェクトをインスタンス化し、マップの MapElements コレクションに追加します。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map>
        <maps:Map.MapElements>
            <maps:Polygon StrokeColor="#FF9900"
                          StrokeWidth="8"
                          FillColor="#88FF9900">
                <maps:Polygon.Geopath>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>47.6458676</x:Double>
                            <x:Double>-122.1356007</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>47.6458097</x:Double>
                            <x:Double>-122.142789</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    ...
                </maps:Polygon.Geopath>
            </maps:Polygon>
        </maps:Map.MapElements>
    </maps:Map>
</ContentPage>

同等の C# コードは次のとおりです。

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Map map = new Map();

// Instantiate a polygon
Polygon polygon = new Polygon
{
    StrokeWidth = 8,
    StrokeColor = Color.FromArgb("#1BA1E2"),
    FillColor = Color.FromArgb("#881BA1E2"),
    Geopath =
    {
        new Location(47.6368678, -122.137305),
        new Location(47.6368894, -122.134655),
        ...
    }
};

// Add the polygon to the map's MapElements collection
map.MapElements.Add(polygon);

多角形のアウトラインを設定するには、 StrokeColor プロパティと StrokeWidth プロパティを指定します。この例では、 FillColor プロパティの値は StrokeColor プロパティ値と一致しますが、透明にするためにアルファ値が指定されているため、基になるマップを図形を通じて表示できます。 GeoPath プロパティには、多角形のポイントの地理座標を定義するLocation オブジェクトの一覧が含まれています。 Polygon オブジェクトは、MapElementsのMap コレクションに追加されると、マップ上にレンダリングされます。

注

Polygonは完全に囲まれた図形です。最初と最後のポイントが一致しない場合、自動的に接続されます。

ポリラインを作成する

Polyline オブジェクトをマップに追加するには、そのオブジェクトをインスタンス化し、マップの MapElements コレクションに追加します。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map>
        <maps:Map.MapElements>
            <maps:Polyline StrokeColor="Black"
                           StrokeWidth="12">
                <maps:Polyline.Geopath>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>47.6381401</x:Double>
                            <x:Double>-122.1317367</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>47.6381473</x:Double>
                            <x:Double>-122.1350841</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    ...
                </maps:Polyline.Geopath>
            </maps:Polyline>
        </maps:Map.MapElements>
    </maps:Map>
</ContentPage>

同等の C# コードは次のとおりです。

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Map map = new Map();

// instantiate a polyline
Polyline polyline = new Polyline
{
    StrokeColor = Colors.Blue,
    StrokeWidth = 12,
    Geopath =
    {
        new Location(47.6381401, -122.1317367),
        new Location(47.6381473, -122.1350841),
        ...
    }
};

// Add the Polyline to the map's MapElements collection
map.MapElements.Add(polyline);

線の外観を設定するには、 StrokeColor プロパティと StrokeWidth プロパティを指定します。 GeoPath プロパティには、ポリラインポイントの地理座標を定義するLocationオブジェクトのリストが含まれています。 Polyline オブジェクトは、MapElementsのMap コレクションに追加されると、マップ上にレンダリングされます。

円を作成する

Circle オブジェクトをマップに追加するには、そのオブジェクトをインスタンス化し、マップの MapElements コレクションに追加します。

<ContentPage ...
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map>
        <maps:Map.MapElements>
            <maps:Circle StrokeColor="#88FF0000"
                         StrokeWidth="8"
                         FillColor="#88FFC0CB">
                <maps:Circle.Center>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>37.79752</x:Double>
                            <x:Double>-122.40183</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                </maps:Circle.Center>
                <maps:Circle.Radius>
                    <maps:Distance>
                        <x:Arguments>
                            <x:Double>250</x:Double>
                        </x:Arguments>
                    </maps:Distance>
                </maps:Circle.Radius>
            </maps:Circle>             
        </maps:Map.MapElements>
    </maps:Map>
</ContentPage>

同等の C# コードは次のとおりです。

using Microsoft.Maui.Controls.Maps;
using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;

Map map = new Map();

// Instantiate a Circle
Circle circle = new Circle
{
    Center = new Location(37.79752, -122.40183),
    Radius = new Distance(250),
    StrokeColor = Color.FromArgb("#88FF0000"),
    StrokeWidth = 8,
    FillColor = Color.FromArgb("#88FFC0CB")
};

// Add the Circle to the map's MapElements collection
map.MapElements.Add(circle);

マップ上の Circle の場所は、 Center プロパティと Radius プロパティの値によって決まります。 Center プロパティは円の中心を緯度と経度で定義し、Radius プロパティは円の半径をメートル単位で定義します。 StrokeColorプロパティとStrokeWidthプロパティを指定して、円のアウトラインを設定します。 FillColor プロパティの値は、円の周囲の色を指定します。この例では、両方のカラー値でアルファチャネルを指定し、基になるマップを円を通して表示できるようにします。 Circle オブジェクトは、MapElementsのMap コレクションに追加されると、マップ上にレンダリングされます。

注

GeographyUtils クラスには、ToCircumferencePositions オブジェクト (CircleおよびCenter プロパティ値を定義する) を円周の緯度と経度の座標を構成するRadius オブジェクトのリストに変換するLocation拡張メソッドがあります。

ジオコーディングと位置情報

Geocoding名前空間の Microsoft.Maui.Devices.Sensors クラスを使用すると、プレースマークを位置座標にジオコーディングし、座標をプレースマークに逆ジオコーディングすることができます。詳細については、「ジオコーディング」を参照してください。

Geolocation名前空間の Microsoft.Maui.Devices.Sensors クラスを使用して、デバイスの現在の位置情報座標を取得できます。詳細については、「位置情報」を参照してください。

ネイティブマップアプリを起動する

各プラットフォーム上のネイティブマップアプリは、 Launcher クラスによって .NET MAUI アプリから起動できます。このクラスを使用すると、アプリはカスタム URI スキームを使用して別のアプリを開きます。起動ツールの機能は、 OpenAsync メソッドを使用して呼び出し、開くカスタム URL スキームを表す string または Uri 引数を渡すことができます。 Launcher クラスの詳細については、「Launcher」を参照してください。

注

Launcher クラスを使用する代わりに、Map名前空間Microsoft.Maui.ApplicationModelクラスを使用します。詳細については、「マップ」を参照してください。

各プラットフォーム上のマップアプリでは、一意のカスタム URI スキームが使用されます。 iOS のマップ URI スキームの詳細については、「developer.apple.com のマップリンク」を参照してください。 Android 上のマップ URI スキームの詳細については、developers.android.com の Android 用マップ開発者ガイドと Google Maps Intents を参照してください。 Windows でのマップ URI スキームの詳細については、「Windows Maps アプリの起動」を参照してください。

特定の場所でマップアプリを起動する

各マップアプリのカスタム URI スキームに適切なクエリパラメーターを追加することで、ネイティブマップアプリ内の場所を開くことができます。

if (DeviceInfo.Current.Platform == DevicePlatform.iOS || DeviceInfo.Current.Platform == DevicePlatform.MacCatalyst)
{
    // https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
    await Launcher.OpenAsync("http://maps.apple.com/?q=394+Pacific+Ave+San+Francisco+CA");
}
else if (DeviceInfo.Current.Platform == DevicePlatform.Android)
{
    // opens the Maps app directly
    await Launcher.OpenAsync("geo:0,0?q=394+Pacific+Ave+San+Francisco+CA");
}
else if (DeviceInfo.Current.Platform == DevicePlatform.WinUI)
{
    await Launcher.OpenAsync("bingmaps:?where=394 Pacific Ave San Francisco CA");
}

このコード例では、各プラットフォームでネイティブマップアプリが起動され、マップは指定した場所を表すピンの中央に配置されます。

ルート案内を使用してマップアプリを起動する

各マップアプリのカスタム URI スキームに適切なクエリパラメーターを追加することで、ルート案内を表示するネイティブマップアプリを起動できます。

if (DeviceInfo.Current.Platform == DevicePlatform.iOS || DeviceInfo.Current.Platform == DevicePlatform.MacCatalyst)
{
    // https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
    await Launcher.OpenAsync("http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino");
}
else if (DeviceInfo.Current.Platform == DevicePlatform.Android)
{
    // opens the 'task chooser' so the user can pick Maps, Chrome or other mapping app
    await Launcher.OpenAsync("http://maps.google.com/?daddr=San+Francisco,+CA&saddr=Mountain+View");
}
else if (DeviceInfo.Current.Platform == DevicePlatform.WinUI)
{
    await Launcher.OpenAsync("bingmaps:?rtp=adr.394 Pacific Ave San Francisco CA~adr.One Microsoft Way Redmond WA 98052");
}

次のコード例では、各プラットフォームでネイティブマップアプリが起動され、指定した場所間のルートが中心にマップされます。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-24

次の方法で共有

Map

セットアップ

マップの初期化

プラットフォームの構成

iOS と Mac Catalyst

Android

Google Maps API キーを取得する

Google Play サービスのバージョン番号を指定する

場所のアクセス許可を指定する

WRITE_EXTERNAL_STORAGE権限を指定する

地図操作

マップを表示する

マップの種類

マップ上の特定の場所を表示する

MapSpan オブジェクトを作成する

マップを移動する

マップをズームする

マップの動作をカスタマイズする

トラフィック データを表示する

スクロールを無効にする

ズームを無効にする

ユーザーの場所を表示する

マップクリック

場所と距離

場所

距離

ピン

ピンを表示する

ピンを操作する

ピンの種類

ピン コレクションを表示する

実行時にアイテムの外観を選択する

多角形、ポリライン、および円

多角形を作成する

ポリラインを作成する

円を作成する

ジオコーディングと位置情報

ネイティブ マップ アプリを起動する

特定の場所でマップ アプリを起動する

ルート案内を使用してマップ アプリを起動する

フィードバック

その他のリソース

トラフィックデータを表示する

ピンコレクションを表示する

ネイティブマップアプリを起動する

特定の場所でマップアプリを起動する

ルート案内を使用してマップアプリを起動する