JavaScript için Tüketici SDK'sını Kullanmaya Başlama

JavaScript SDK'sı, Fleet Engine'de izlenen araçların ve önemli yerlerin konumlarını görselleştirmenize olanak tanır. Kitaplık, standart bir google.maps.Map varlığı ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerine kullanılabilen bir JavaScript harita bileşeni içerir. JavaScript SDK'sını kullanarak web uygulamanızdan özelleştirilebilir, animasyonlu bir gezi ve sipariş ilerleme durumu deneyimi sunabilirsiniz.

Bileşenler

JavaScript SDK, araçların ve ara noktaların görselleştirilmesini sağlayan bileşenlerin yanı sıra, sürücünün tahmini varış süresi veya sürüş için kalan mesafe için ham veri feed'leri de sağlar.

Yolculuk ve Sipariş İlerleme Durumu harita görünümü

Harita görünümü bileşeni, araçların ve ara noktaların konumunu görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni tahmin edilen yol boyunca hareket ederken aracı canlandırır.

Gezi konumu sağlayıcı

JavaScript SDK'sı, takip edilen nesnelerin konum bilgilerini gezi ve sipariş ilerleme haritasına aktaran bir gezi konumu sağlayıcısı içerir.

Aşağıdakileri izlemek için gezi konumu sağlayıcıyı kullanabilirsiniz:

  • Bir gezinin başlangıç veya bırakma konumu.
  • Geziye atanan aracın konumu ve rotası.

İzlenen konum nesneleri

Konum sağlayıcı, ara noktalar ve araçlar gibi nesnelerin konumunu izler.

Kalkış noktası konumu

Kalkış konumu, yolculuğun başladığı konumdur. Alınma yeri belirleniyor.

Hedef konumu

Varış konumu, yolculuğun bittiği konumdur. İade yerini belirtir.

Ara nokta konumu

Ara nokta konumu, takip edilen bir yolculuğun rotası üzerindeki herhangi bir konumdur. Örneğin, otobüs güzergahı üzerindeki her durak, bir ara nokta konumudur.

Araç konumu

Aracın konumu, aracın izlenen konumudur. İsteğe bağlı olarak araç için bir rota içerebilir.

Kimlik doğrulama jetonu alıcısı

Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek için sunucunuzda Fleet Engine için bir JSON Web Token (JWT) madencilik hizmeti uygulamanız gerekir. Ardından, konum verilerine erişimde kimlik doğrulaması yapmak için JavaScript SDK'sını kullanarak web uygulamanızın parçası olarak bir kimlik doğrulama jetonu alıcısı uygulayın.

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, harita üzerinde izlenen konum nesnelerinin görünümünü ve tarzını belirler. Varsayılan stili web uygulamanızın stiline uyacak şekilde değiştirmek için özel stil seçeneklerini kullanabilirsiniz.

Takip edilen konumların görünürlüğünü kontrol etme

Bu bölümde, Fleet Engine'in önceden tanımlanmış konum sağlayıcıları için haritadaki takip edilen konum nesnelerinin görünürlük kuralları açıklanmaktadır. Özel veya türetilmiş konum sağlayıcıları, görünürlük kurallarını değiştirebilir.

Araçlar

Ortak araç, seyahate atandığı andan teslim zamanından itibaren görünür. Yolculuk iptal edilirse araç daha uzun süre görünür olur.

Diğer tüm konum işaretçileri

Kalkış, varış ve ara noktalara ait diğer tüm konum işaretçileri her zaman harita üzerinde gösterilir. Örneğin, yolculuğun veya teslimatın durumundan bağımsız olarak bir araç paylaşma bırakma konumu ya da gönderim teslimat konumu her zaman harita üzerinde gösterilir.

JavaScript SDK'sını kullanmaya başlayın

JavaScript SDK'sını kullanmadan önce Fleet Engine ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun.

Bir araç paylaşma seyahatini takip etmek için önce seyahat kimliği hak talebi oluşturun.

Gezi kimliği hak talebi oluştur

Gezi konumu sağlayıcıyı kullanarak bir geziyi takip etmek için gezi kimliği talebi içeren bir JSON Web Token (JWT) oluşturun.

JWT yükünü oluşturmak için yetkilendirme bölümüne tripid anahtarını içeren bir ek talep ekleyin ve değerini gezi kimliğine ayarlayın.

Aşağıdaki örnekte, gezi kimliğine göre izleme için nasıl jeton oluşturulacağı gösterilmektedir:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

Kimlik doğrulama jetonu alıcısı oluşturma

Projeniz için bir hizmet hesabı sertifikası kullanarak sunucularınızda uygun taleplere sahip bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz. Sunucularınızda yalnızca jeton basmanız ve sertifikalarınızı hiçbir zaman hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliğini tehlikeye atarsınız.

Alıcı, Promise içine sarmalanmış iki alanlı bir veri yapısı döndürmelidir:

  • token dizesi.
  • Sayı expiresInSeconds. Bir jetonun süresi, getirildikten sonra bu süre içinde dolar.

JavaScript Tüketici SDK'sı, aşağıdakilerden herhangi biri doğru olduğunda kimlik doğrulama jetonu alıcısı aracılığıyla bir jeton ister:

  • Geçerli bir jetonu yoktur (ör. yeni bir sayfa yüklemesinde alıcıyı çağrılmadığında veya alıcı bir jetonla geri dönmediğinde).
  • Daha önce getirdiği jetonun süresi doldu.
  • Daha önce getirilen jetonun geçerlilik süresi dolduktan sonra bir dakika içinde.

Aksi takdirde, SDK daha önce yayınlanmış ve hâlâ geçerli olan jetonu kullanır ve alıcıyı çağırmaz.

Aşağıdaki örnekte, kimlik doğrulama jetonu alıcısının nasıl oluşturulacağı gösterilmektedir:

JavaScript

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

Jetonları basmak için sunucu tarafı uç noktasını uygularken aşağıdakileri göz önünde bulundurun:

  • Uç nokta, jeton için bir geçerlilik süresi döndürmelidir. Yukarıdaki örnekte data.ExpiresInSeconds olarak verilmiştir.
  • Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi süre sonu zamanını (saniye cinsinden) kitaplığa geçirmelidir.
  • SERVER_TOKEN_URL, sağlayıcı uygulamanıza bağlıdır. Örnek sağlayıcının URL'leri aşağıda verilmiştir:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

HTML'den harita yükleme

Aşağıdaki örnekte, JavaScript SDK'nın belirtilen bir URL'den nasıl yükleneceği gösterilmektedir. callback parametresi, API yüklendikten sonra initMap işlevini yürütür. defer özelliği, tarayıcının API yüklenirken sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Geziyi takip etme

Bu bölümde, bir araç paylaşma veya teslimat seyahatini takip etmek için JavaScript SDK'nın nasıl kullanılacağı gösterilmektedir. Kodunuzu çalıştırmadan önce komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yüklediğinizden emin olun.

Gezi konumu sağlayıcı gösterme

JavaScript SDK'sı, Fleet Engine Ridesharing API için bir konum sağlayıcısını önceden tanımlar. Jeton fabrikanızı örneklendirmek için proje kimliğinizi ve bir referans kullanın.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Harita görünümünü başlatma

JavaScript SDK'yı yükledikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda, harita görünümünü barındıran bir <div> öğesi bulunmalıdır. <div> öğesi aşağıdaki örnekte map_canvas olarak adlandırılmıştır.

Yarış koşullarını önlemek için harita başlatıldıktan sonra çağrılan geri çağırmadaki konum sağlayıcısının gezi kimliğini ayarlayın.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak görev nesnesinden bir seyahatle ilgili meta bilgileri alabilirsiniz. Meta bilgiler, tahmini varış süresini ve yolcu alma veya bırakmadan önceki mesafeyi içerir. Meta bilgilerde yapılan değişiklikler bir update etkinliğini tetikler. Aşağıdaki örnekte, bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

JavaScript

locationProvider.addListener('update', e => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

Hataları işleme

Seyahat bilgileri istenirken eşzamansız olarak oluşan hatalar hata etkinliklerini tetikler. Aşağıdaki örnekte, hataları işlemek için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

Not: İstenmeyen hataları işlemek için kitaplık çağrılarını try...catch bloklarına sığdırdığınızdan emin olun.

İzlemeyi durdur

Konum sağlayıcının geziyi izlemesini durdurmak için gezi kimliğini konum sağlayıcıdan kaldırın.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Konum sağlayıcıyı harita görünümünden kaldırma

Aşağıdaki örnekte, bir konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Esas haritanın görünümünü ve tarzını özelleştirme

Haritalar bileşeninin görünüm ve tarzını özelleştirmek için bulut tabanlı araçları kullanarak veya seçenekleri doğrudan kod içinde ayarlayarak haritanızı biçimlendirin.

Bulut tabanlı harita stil özelliklerini kullanma

Bulut tabanlı harita stilleri, Google Cloud Console'dan Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmadan harita stilleri oluşturmanıza ve düzenlemenize olanak tanır. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript SDK haritanıza stil uygulamak için JourneySharingMapView oluştururken mapId ve diğer mapOptions öğelerini belirtin. JourneySharingMapView örneklendikten sonra mapId alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceği gösterilmektedir.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

Kod tabanlı harita stili kullanma

Harita stilini özelleştirmenin diğer bir yolu, JourneySharingMapView öğesini oluştururken mapOptions değerini ayarlamaktır.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

İşaretçi özelleştirmelerini kullan

JavaScript SDK'sı ile, haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. İşaretçi özelleştirmelerini belirterek bunu yapabilirsiniz. İşaretçiler, daha sonra haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde bu özelleştirmeleri uygular.

En basit özelleştirme, aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirtmektir. Nesnede belirtilen değişiklikler, her bir işaretçi oluşturulduktan sonra uygulanır ve varsayılan seçeneklerin üzerine yazılır.

Daha gelişmiş bir seçenek de özelleştirme işlevi belirtmektir. Özelleştirme işlevleri, işaretçilerin verilere dayalı olarak şekillendirilmesinin yanı sıra tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Yolculuk ve Sipariş İlerleme Durumu, işaretçinin temsil ettiği nesne türüyle (araç, başlangıç noktası, ara nokta veya hedef) ilgili verileri özelleştirme işlevine iletir. Bu, daha sonra işaretçi stilinin işaretçi öğesinin kendi mevcut durumuna (örneğin, araç yolculuğu bitirene kadar kalan ara nokta sayısı) göre değiştirilmesine olanak tanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçiyi bu bilgilere göre şekillendirebilirsiniz.

JavaScript SDK, FleetEngineTripLocationProviderOptions ürününde aşağıdaki özelleştirme parametrelerini sağlar:

MarkerOptions kullanarak işaretçilerin stilini değiştirin

Aşağıdaki örnekte, bir araç işaretçisinin stilinin bir MarkerOptions nesnesiyle nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirin

Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

İşaretçilere tıklama işleme ekleme

Aşağıdaki örnekte, bir araç işaretçisine tıklama tutma yeri ekleme işlemi gösterilmektedir. Daha önce listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işlemi eklemek için bu kalıbı uygulayın.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Çoklu çizgi özelleştirmelerini kullanma

JavaScript SDK'sı ile harita üzerindeki gezi rotasının görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, aracın aktif veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Çoklu çizgi özelleştirmeleri belirterek Polyline nesnelerinin stilini belirleyebilirsiniz. Daha sonra kitaplık, bu özelleştirmeleri iki durumda uygular: Nesneleri haritaya eklemeden önce ve nesneler için kullanılan veriler değiştiğinde.

İşaretçi özelleştirmeye benzer şekilde, oluşturulan veya güncellendiğinde eşleşen Polyline nesnelerinin tümüne uygulanacak bir PolylineOptions grubu belirtebilirsiniz.

Aynı şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin stilini ayrı ayrı düzenlemenizi sağlar. Bu işlev, her bir nesnenin stilini aracın mevcut durumuna göre değiştirebilir. Örneğin, Polyline nesnesini daha koyu bir gölgeye boyayabilir veya araç yavaş hareket ederken nesneyi kalınlaştırabilir. Hatta Fleet Engine dışındaki kaynaklarla birleştirme yapabilir ve Polyline nesnesini bu bilgilere göre şekillendirebilirsiniz.

FleetEngineTripLocationProviderOptions bölümünde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz. Daha önce seyahat edilmiş, aktif olarak seyahatte veya henüz gidilmemiş araç yolculuğunda farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, PolylineOptions ile bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Özelleştirme işlevlerini kullanarak Polyline nesnelerin stilini değiştirin

Aşağıdaki örnekte, etkin bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

Polyline nesnelerin görünürlüğünü kontrol et

Varsayılan olarak Polyline nesnenin tümü görünürdür. Bir Polyline nesnesini görünmez yapmak için visible özelliğini ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Trafiğe duyarlı Polyline nesne oluştur

Fleet Engine, takip edilen araç için aktif ve kalan yollara ait trafik hızı verilerini döndürür. Bu bilgileri kullanarak Polyline nesnelerini trafik hızlarına göre biçimlendirebilirsiniz:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Bir araç veya konum işaretçisi için InfoWindow görüntüleyin

Bir araç veya konum işaretçisi hakkında ek bilgi görüntülemek için InfoWindow kullanabilirsiniz.

Aşağıdaki örnekte, InfoWindow öğesi oluşturma ve araç işaretçisine ekleme işlemi gösterilmektedir:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Otomatik sığdırmayı devre dışı bırak

Otomatik sığdırma özelliğini devre dışı bırakarak haritanın, görüntü alanını araca ve öngörülen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, gezi ve sipariş ilerleme durumu harita görünümünü yapılandırırken otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Mevcut bir haritayı değiştirme

Bu özelleştirmeleri kaybetmeden, işaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı değiştirmek için JavaScript SDK'sını kullanabilirsiniz.

Örneğin, üzerinde işaretçi bulunan standart google.maps.Map varlığına sahip bir web sayfanız olduğunu varsayalım:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

JavaScript SDK'sını eklemek için:

  1. Kimlik doğrulama jetonu fabrikası için kod ekleyin.
  2. initMap() işlevinde bir konum sağlayıcıyı başlatın.
  3. initMap() işlevinde harita görünümünü başlatın. Görünüm, haritayı içerir.
  4. Özelleştirmenizi, harita görünümünü başlatma için geri çağırma işlevine taşıyın.
  5. Konum kitaplığını API yükleyicisine ekleyin.

Aşağıdaki örnekte, yapılacak değişiklikler gösterilmektedir:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Uluru yakınında belirtilen kimlikle bir gezi gerçekleştiriyorsanız bu gezi artık haritada oluşturulur.