Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
 
 
OutSystems

Map

Map UIパターンを使用すると、インタラクティブな衛星地図をユーザーに提供できます。

Google Mapsは無料ではありません。常にAPIキーを購入する必要があります。APIキーの入手の詳細については、https://developers.google.com/maps/d...api-keyをご覧ください

Map UIパターンの使用方法

  1. Service StudioのツールボックスでMapを検索します。

    Mapウィジェットが表示されます。

    Service StudioツールバーのMap

  2. ツールボックスから、Mapsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    プレビュー画面のMapパターン

  3. (オプションの)プロパティを設定し、Mapのルックアンドフィールを変更できます。

    この例では、APIキーを入力しています。これによって、「For development purposes」という透かしが削除されます。また、LocationプロパティとMarker Locationプロパティにリスボンの緯度と経度(38.71667, -9.13333)を入力しています。最後に、Zoomプロパティを設定し、ページの読み込み時のズームを都市レベルにします。

    Mapのプレビューとプロパティ

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

  • Standard(デフォルト)
  • Silver
  • Retro
  • Dark
  • Night
  • Aubergine
  • プロパティ 説明
    APIKey(Text型): オプション 地図を正しく表示し、開発用であることを示す透かしを削除するため、Google MapsのAPIキーを追加します。Google MapsのAPIキーは、以下から入手できます。https://developers.google.com/maps/documentation/javascript/get-api-key
    Location(Text型): オプション 地図の中心となる場所を定義します。住所または座標(緯度と経度)を入力できます。デフォルトでは、すべてのマーカーが地図に表示されるように自動的に調整されます。LocationプロパティとZoomプロパティでこれを上書きすることができます。マーカーを追加するには、MapMarkerブロックを[Content]プレースホルダにドラッグします。
    Markers(Marker List型): オプション 地図上の場所を設定します。デフォルトでは、Google Mapsのデフォルトのマーカーを使用します。詳細については、https://developers.google.com/maps/d...markersをご覧ください
    Zoom(Zoom Identifier型): いいえ 地図に適用するズームレベルを1(世界)~20(建物)の範囲で設定します。

    • Auto: すべてのマーカーが地図上に表示されるように調整されます。これがデフォルトです。
    • Zoom1:世界
    • Zoom5:大陸
    • Zoom10:都市
    • Zoom15:道路
    • Zoom20:建物

    詳細については、https://developers.google.com/maps/d...-levelsをご覧ください

    Height(Text型): オプション 地図の高さをピクセル単位(「300px」)、パーセント単位(「100%」)、または表示領域の高さ(「100vh」)で設定します。このプロパティを空白のままにした場合、地図は親の高さに合わせて設定されます。パーセントを使用する場合、地図の親の高さが固定値であることを確認してください。それ以外の場合、高さは0になります。Heightプロパティの値は、OutSystems UIテーマで使用されるCSS変数に適用されます。この変数を上書きし、CSSテーマの地図の高さを操作できます。
    Style(Style Identifier型): オプション Google Mapsが提供するテーマに基づき、テーマのタイプを設定します。独自スタイルの作成やテーマオプションの変更については、https://mapstyle.withgoogle.com/をご覧ください。カスタムテーマを準備した場合は、AdvancedFormatプロパティを使用して適用します。なお、Satelliteタイプを選択すると、適用したスタイルは表示されません。詳細については、https://developers.google.com/maps/d...stylingをご覧ください。使用できるスタイルは次のとおりです:

    Type(Type Identifier型): オプション 地図タイプをGoogle Mapsが提供するroadmap(デフォルト)、satellite、hybrid、terrainのいずれかに設定します。詳細については、https://developers.google.com/maps/d...aptypesをご覧ください
    Offset(Offset型): オプション オプションを拡張し、縦方向のOffset(X)と横方向のOffset(Y)をピクセル単位で設定して、地図に適用します。これは、定義されたLocationに基づいて適用されます。
    StaticMap(Boolean型): オプション Trueの場合、インタラクティブではない地図になります。Falseの場合、インタラクティブな地図になります。これがデフォルトです。静的な地図のAPIには制限があります。詳細については、https://developers.google.com/maps/d...c/startをご覧ください
    ShowTraffic(Boolean型): オプション Trueの場合、地図の交通情報モードが有効になります。Falseの場合、交通情報モードは有効になりません。これがデフォルトです。
    AdvancedFormat(Text型): オプション 入力によって提供されるもの以外の追加オプションを使用できます。詳細については、https://developers.google.com/maps/d...ontrolsをご覧ください
    ExtendedClass(Text型): オプション ブロックにカスタムスタイルクラスを追加します。
    • Was this article helpful?