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

JavaScript SDK'sı, Fleet Engine'de izlenen araçların ve ilgilenilen konumları görselleştirmenizi sağlar. Kitaplık, standart bir google.maps.Map varlığının ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerini alan 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 sağlayabilirsiniz.

Bileşenler

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

Gezi ve Sipariş İlerlemesi 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 eden aracı canlandırır.

Gezi konumu sağlayıcı

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

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

• Bir seyahatin alınacağı veya bırakılacağı konum.
• Yolculuğa atanan aracın konumu ve rotası.

İzlenen konum nesneleri

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

Kalkış yeri

Kalkış konumu, yolculuğun başladığı konumdur. Teslim alma konumunu işaretliyor.

Hedef konumu

Varış konumu, yolculuğun sona erdiği konumdur. Teslimat konumunu belirtir.

Ara nokta konumu

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

Araç konumu

Araç konumu, bir aracın takip edilen konumudur. İsteğe bağlı olarak araç için bir rota da yer alabilir.

Kimlik doğrulama jetonu alıcısı

Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek üzere sunucunuzda Fleet Engine için bir JSON Web Token (JWT) para kazanma hizmeti uygulamanız gerekir. Daha sonra, konum verilerine erişimin kimliğini doğrulamak için JavaScript SDK'sını kullanarak web uygulamanızın bir parçası olarak bir kimlik doğrulama jetonu getirme aracı uygulayın.

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, haritadaki 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.

İzlenen konumların görünürlüğünü kontrol etme

Bu bölümde, Fleet Engine önceden tanımlanmış konum sağlayıcıları için haritadaki izlenen konum nesnelerine yönelik 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

Araç paylaşım aracı, seyahate atandığı andan yola çıkma zamanına kadar gösterilir. Yolculuk iptal edilirse araç artık görünür durumda olur.

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

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

JavaScript SDK'sını kullanmaya başlama

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

Araç paylaşımı seyahatini takip etmek için önce gezi kimliği hak talebi oluşturun.

Gezi kimliği hak talebi oluşturun

Seyahat konumu sağlayıcısını kullanarak bir seyahati takip etmek için gezi kimliği talebi ile bir JSON Web Token (JWT) oluşturun.

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

Aşağıdaki örnekte, gezi kimliğine göre izleme için jetonun nasıl 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 hak talepleriyle basılmış bir jetonu almak amacıyla kimlik doğrulama jetonu getirme aracı oluşturabilirsiniz. Sunucularınızda yalnızca jetonları bastırmanız ve sertifikalarınızı hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliği tehlikeye girer.

Alıcı, iki alan içeren bir Vaat içinde sarmalanmış bir veri yapısı döndürmelidir:

• token dizesi.
• expiresInSeconds sayısı. Bir jetonun süresi, getirildikten bu süre sonra dolar.

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

• Yeni bir sayfa yüklemesinde alıcıyı çağırmadığı veya alıcının jeton döndürmediği durumlarda geçerli bir jetonu yoktur.
• Daha önce getirdiği jetonun süresi dolmuş.
• Daha önce getirilen jetonun süresinin dolmasından itibaren bir dakika içinde olması.

Aksi takdirde, SDK daha önce verilmiş olan geçerli 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:

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
  };
}

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 bitiş zamanı döndürmelidir; yukarıdaki örnekte data.ExpiresInSeconds olarak verilmiştir.
• Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi geçerlilik süresini (getirilme zamanından itibaren 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 şunlardır:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

HTML'den harita yükleme

Aşağıdaki örnekte, JavaScript SDK'sının belirtilen bir URL'den nasıl yükleneceği gösterilmektedir. callback parametresi, initMap işlevini API yüklendikten sonra yürütür. defer özelliği, API yüklenirken tarayıcının 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>

Gezi takibi

Bu bölümde, araç paylaşımı veya teslimat gezisini takip etmek için JavaScript SDK'sı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.

Bir gezi konumu sağlayıcıyı örneklendirme

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

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',
});

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'sını 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ğırmada konum sağlayıcının gezi kimliğini ayarlayın.

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);

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şim etkinliklerini dinleme

Konum sağlayıcısını kullanarak görev nesnesinden bir geziyle ilgili meta bilgileri alabilirsiniz. Meta bilgiler, tahmini varış süresini ve teslim alma ya da teslimden önce kalan 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.

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

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

Yolculuk bilgileri isteğinden eşzamansız olarak ortaya çıkan hatalar, hata etkinliklerini tetikler. Aşağıdaki örnekte, hataların işlenmesi için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

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

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

Not: Beklenmeyen hataları işlemek için kitaplık çağrılarını try...catch bloklarında sarmaladığınızdan emin olun.

İzlemeyi durdur

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

locationProvider.tripId = '';

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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

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

Bulut tabanlı harita stilini kullanma

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

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

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 ayarlamaktır.

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

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 kullanma

JavaScript SDK ile haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçi özelleştirmelerini belirterek yaparsınız. Bu özelleştirmeler, JavaScript SDK'sı haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde uygulanır.

En basit özelleştirme işlemi, 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 varsayılan seçeneklerin üzerine yazılarak uygulanır.

Daha gelişmiş bir seçenek de, bir özelleştirme işlevi belirtmektir. Özelleştirme işlevleri, işaretçilerin verilere göre stillandırılmasına ve tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Özellikle Yolculuk ve Sipariş İlerlemesi, özelleştirme işlevine işaretçinin temsil ettiği nesne türüyle (araç, kalkış, ara nokta veya hedef) ilgili verileri iletir. Bu şekilde, işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, araç yolculuğu tamamlayana kadar kalan ara nokta sayısı) göre değişmesi sağlanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verileri birleştirerek işaretçiyi bu bilgilere göre biçimlendirebilirsiniz.

JavaScript SDK'sı, FleetEngineTripLocationProviderOptions içinde aşağıdaki özelleştirme parametrelerini sağlar:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin 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.

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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.

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

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

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

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

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

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

Çoklu çizgi özelleştirmelerini kullanma

JavaScript SDK ile gezi rotasının haritadaki görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, aracın etkin veya kalan yolundaki her bir koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Çoklu çizgi özelleştirmelerini belirterek Polyline nesnelerini biçimlendirebilirsiniz. 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şturulduğunda veya güncellendiğinde eşleşen tüm Polyline nesnelerine uygulanacak bir PolylineOptions grubu belirtebilirsiniz.

Benzer şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin ayrı ayrı stillandırılmasına olanak tanır. Bu işlev, aracın mevcut durumuna göre her nesnenin stilini değiştirebilir. Örneğin, Polyline nesnesini daha derin bir gölgeyle renklendirebilir veya araç yavaş hareket ettiğinde kalınlaştırılabilir. Hatta Fleet Engine dışındaki kaynaklardan da birleştirebilir ve Polyline nesnesinin stilini bu bilgilere göre belirleyebilirsiniz.

FleetEngineTripLocationProviderOptions içinde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz. Aracın seyahatinde zaten ilerlemiş, aktif olarak seyahat eden veya henüz seyahat edilmemiş olan farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:

• Daha önce katılmış bir yol için takenPolylineCustomization;
• Aktif olarak seyreden bir yol için activePolylineCustomization;
• remainingPolylineCustomization, henüz seyahat edilmemiş bir yol için.

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, PolylineOptions ile Polyline nesnesi için stilin 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.

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

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

Özelleştirme işlevlerini kullanarak Polyline nesnenin 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 birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

// 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'});
      });
    }
  };

// 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 nesnenin görünürlüğünü kontrol edin

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Trafiğe duyarlı Polyline nesne oluştur

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

// 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'});
      }
    }
  };

// 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'});
      }
    }
  };

Araç veya konum işaretçisi için bir InfoWindow görüntüleyin

Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntülemek için InfoWindow kullanabilirsiniz.

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

// 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();

// 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ırmayı devre dışı bırakarak haritanın görüntü alanını otomatik olarak araca ve öngörülen rotaya sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, gezi ve sipariş ilerleme durumu harita görünümünü yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

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

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

JavaScript SDK'sını kullanarak, işaretçileri veya diğer özelleştirmeleri içeren mevcut bir haritayı bu özelleştirmeleri kaybetmeden değiştirebilirsiniz.

Örneğin, işaretçinin gösterildiği standart bir google.maps.Map varlığı içeren 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ı 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ü başlatma işlemi için geri çağırma işlevine taşıyın.
5. API yükleyicisine konum kitaplığını 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ınlarında, belirtilen kimlikle seyahat ederseniz bu seyahat artık haritada oluşturulur.