このページは Cloud Translation API によって翻訳されました。

マーカーをカスタマイズする

プラットフォームを選択: Android iOS JavaScript

マーカー（またはポリライン）をカスタマイズする前に、まず UI カスタマイズオプションを初期化する必要があります。

UI カスタマイズオプションを初期化する

UI カスタマイズオプションを最初に設定するために使用する推奨コールバックは、GMTCMapViewDelegate で宣言されています。GMTCMapView オブジェクトが地図のレンダリングの準備を完了すると、mapViewDidInitialize コールバックがトリガーされます。スタイルコーディネーターは初期化されていますが、UI 要素が存在しません。

Swift

/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}

Objective-C

/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}

マーカーをカスタマイズする

次の例では、GMTCMapView を使用してマーカーのスタイルをカスタマイズしています。マーカーのタイプとそのプロパティを設定するには、setMarkerStyleOptions(_:markerType:) を使用します。カスタムマーカーオプションは、Consumer SDK によって提供されるデフォルト値をオーバーライドします。

Swift

/** MapViewController.swift */

func updateMarkerUIOptions() {
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = groundAnchor
  markerStyleOptions.isVisible = true
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  let coordinator = self.mapView.consumerMapStyleCoordinator
  coordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)
}

/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}

Objective-C


/** MapViewController.m */

- (void)updateMarkerUIOptions {
  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = groundAnchor;
  markerStyleOptions.isVisible = YES;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;

  [[_mapView consumerMapStyleCoordinator] setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];
}

/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}

マーカーの種類

次のマーカーをカスタマイズできます。

GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination

GMTCCustomizableMarkerType.tripPickupPoint、GMTCCustomizableMarkerType.intermediateDestination、GMTCCustomizableMarkerType.tripDropoffPoint を使用して、旅行を共有する際の経由地をカスタマイズします。

GMTCCustomizableMarkerType.tripVehicle を使用して、乗車ルートを共有する際の車両アイコンをカスタマイズします。マーカーアイコンが、乗車する実際の車両タイプに応じて変化しない。

マーカーオプション

各マーカーでカスタマイズ可能なプロパティは、Google マップの MarkerOptions で提供されるプロパティのサブセットです。Consumer SDK GMTCMarkerStyleOptions には次の特徴があります。

イニシャライザを使用してビルド
構築後は変更できません。
デフォルト値があるため、カスタム値を指定するだけで済みます。

次のプロパティをカスタマイズできます。

groundAnchor
isVisible: マーカーをオフにするには、isVisible を false に設定します。独自の UI 要素を代わりに使用できるように、十分なデータを提供する必要があります。
iconView
icon
zIndex
isFlat

例

Swift

/** MapViewController.swift */

private func updateMarkerUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The marker type that you would like to set custom UI options for.
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle

  // Initializing marker options.
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)

  // Reset marker options to default values.
  consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}

Objective-C

/** MapViewController.m */

- (void)updateMarkerUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  // Initializing marker options.
  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];

  // Reset marker options to default values.
  [consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}

乗車マーカーの到着予定時刻の動的更新

更新された ETA を定期的に動的に表示する乗車マーカーを作成するには、GMTCCustomizableMarkerType.tripPickupPoint のマーカースタイルオプションを更新します。

例

Swift

/** MapViewController.swift */

/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
  Timer.scheduledTimer(
    timeInterval: 60.0,  // Update marker ETA every minute.
    target: self,
    selector: #selector(updatePickupMarkerETA),
    userInfo: nil,
    repeats: true)
}

/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
  let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)

  // Get updated ETA icon.
  let updatedETAIcon = pickupIconForCurrentTime()

  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = updatedETAIcon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}

Objective-C

/** MapViewController.m */

/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
  [NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
                                   target:self
                                 selector:@selector(updatePickupMarkerETA)
                                 userInfo:nil
                                  repeats:YES];
}

/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
  GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];

  // Get updated ETA icon.
  UIImage *updatedETAIcon = [self pickupIconForCurrentTime];

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
                               [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = updatedETAIcon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}

次のステップ

ルートのポリラインをカスタマイズする

マーカーをカスタマイズする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

UI カスタマイズ オプションを初期化する

Swift

Objective-C

マーカーをカスタマイズする

Swift

Objective-C

マーカーの種類

マーカー オプション

例

Swift

Objective-C

乗車マーカーの到着予定時刻の動的更新

例

Swift

Objective-C

次のステップ

マーカーをカスタマイズする

UI カスタマイズオプションを初期化する

マーカーオプション