JavaScript SDK memungkinkan Anda memvisualisasikan lokasi
kendaraan dan lokasi minat yang dilacak di Fleet Engine. Library ini
berisi komponen peta JavaScript yang merupakan pengganti langsung
untuk entity google.maps.Map
standar dan komponen data agar terhubung
dengan Fleet Engine. Dengan JavaScript SDK, Anda dapat memberikan animasi perjalanan dan pengalaman progres pesanan yang dapat disesuaikan dari aplikasi web Anda.
Komponen
JavaScript SDK menyediakan komponen untuk visualisasi kendaraan dan titik jalan, serta feed data mentah untuk PWT pengemudi atau jarak yang tersisa yang akan dikemudikan.
Tampilan peta Progres Perjalanan dan Pesanan
Komponen tampilan peta memvisualisasikan lokasi kendaraan dan titik jalan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.
Penyedia lokasi perjalanan
JavaScript SDK menyertakan penyedia lokasi perjalanan yang memberikan informasi lokasi untuk objek yang dilacak ke dalam peta progres perjalanan dan pesanan.
Anda dapat menggunakan penyedia lokasi perjalanan untuk melacak:
- Lokasi penjemputan atau pengantaran dari perjalanan.
- Lokasi dan rute kendaraan yang ditetapkan untuk perjalanan.
Objek lokasi yang dilacak
Penyedia lokasi melacak lokasi objek seperti titik jalan dan kendaraan.
Lokasi asal
Lokasi asal adalah lokasi dimulainya perjalanan. Tanda ini menandai lokasi penjemputan.
Lokasi tujuan
Lokasi tujuan adalah lokasi akhir perjalanan. Penandaan ini menandai lokasi pengantaran.
Lokasi titik jalan
Lokasi titik jalan adalah lokasi di sepanjang rute perjalanan yang dilacak. Misalnya, setiap perhentian di rute bus adalah lokasi titik jalan.
Lokasi kendaraan
Lokasi kendaraan adalah lokasi kendaraan yang dilacak. Opsi ini dapat menyertakan rute untuk kendaraan.
Pengambil token autentikasi
Untuk mengontrol akses ke data lokasi yang disimpan di Fleet Engine, Anda harus mengimplementasikan layanan pembuatan Token Web JSON (JWT) untuk Fleet Engine di server Anda. Kemudian, implementasikan pengambil token autentikasi sebagai bagian dari aplikasi web Anda, menggunakan JavaScript SDK untuk mengautentikasi akses ke data lokasi.
Opsi gaya visual
Gaya penanda dan polyline menentukan tampilan dan nuansa objek lokasi yang dilacak pada peta. Anda dapat menggunakan opsi gaya kustom untuk mengubah gaya visual default agar sesuai dengan gaya visual aplikasi web Anda.
Mengontrol visibilitas lokasi yang dilacak
Bagian ini menjelaskan aturan visibilitas untuk objek lokasi yang dilacak pada peta untuk penyedia lokasi yang telah ditetapkan Fleet Engine. Penyedia lokasi kustom atau turunan dapat mengubah aturan visibilitas.
Kendaraan
Kendaraan transportasi online terlihat mulai dari waktu yang ditetapkan untuk perjalanan hingga saat penurunan. Jika perjalanan dibatalkan, kendaraan akan terlihat lebih lama.
Semua penanda lokasi lainnya
Semua penanda lokasi lainnya untuk asal, tujuan, dan titik jalan akan selalu ditampilkan di peta. Misalnya, lokasi pengantaran transportasi online atau lokasi pengiriman pengiriman selalu ditampilkan di peta, terlepas dari status perjalanan atau pengiriman.
Mulai menggunakan JavaScript SDK
Sebelum menggunakan JavaScript SDK, pastikan Anda sudah memahami Fleet Engine dan mendapatkan kunci API.
Untuk melacak perjalanan transportasi online, buat klaim ID perjalanan terlebih dahulu.
Membuat klaim ID perjalanan
Untuk melacak perjalanan menggunakan penyedia lokasi perjalanan, buat Token Web JSON (JWT) dengan klaim ID perjalanan.
Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan tripid kunci dan tetapkan nilainya ke ID perjalanan.
Contoh berikut menunjukkan cara membuat token untuk pelacakan berdasarkan ID perjalanan:
{
"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",
}
}
Membuat pengambil token autentikasi
Anda dapat membuat pengambil token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server Anda menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server dan jangan pernah membagikan sertifikat Anda ke klien mana pun. Jika tidak, Anda akan membahayakan keamanan sistem Anda.
Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:
- String
token
. - Angka
expiresInSeconds
. Masa berlaku token akan berakhir dalam waktu ini setelah pengambilan.
JavaScript Consumer SDK meminta token melalui pengambil token autentikasi jika salah satu hal berikut berlaku:
- Token tidak memiliki token yang valid, seperti saat pengambilan belum memanggil pengambil pada pemuatan halaman baru, atau saat pengambil belum ditampilkan dengan token.
- Token yang diambil sebelumnya telah habis masa berlakunya.
- Masa berlaku token yang diambil sebelumnya akan berakhir dalam satu menit.
Jika tidak, SDK akan menggunakan token yang dikeluarkan sebelumnya yang masih valid dan tidak memanggil pengambil.
Contoh berikut menunjukkan cara membuat pengambil token autentikasi:
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(),
};
}
Saat menerapkan endpoint sisi server untuk membuat token, perhatikan hal berikut:
- Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh
di atas, ditentukan sebagai
data.ExpiresInSeconds
. - Pengambil token autentikasi harus meneruskan waktu habis masa berlaku (dalam detik, dari waktu pengambilan) ke library, seperti ditunjukkan pada contoh.
- SERVER_TOKEN_URL bergantung pada penerapan penyedia Anda, berikut adalah URL untuk penyedia contoh:
- https://
SERVER_URL
/token/driver/VEHICLEID
- https://
SERVER_URL
/token/consumer/TRIPID
- https://
Memuat peta dari HTML
Contoh berikut menunjukkan cara memuat JavaScript SDK
dari URL yang ditentukan. Parameter callback menjalankan fungsi initMap
setelah API dimuat. Atribut defer memungkinkan browser
terus merender bagian halaman lainnya saat API dimuat.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Setelah perjalanan
Bagian ini menunjukkan cara menggunakan JavaScript SDK untuk mengikuti perjalanan transportasi online atau pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi perjalanan
JavaScript SDK menentukan terlebih dahulu penyedia lokasi untuk Fleet Engine Ridesharing API. Gunakan project ID Anda dan referensi ke factory token untuk membuat instance.
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',
});
Melakukan inisialisasi tampilan peta
Setelah memuat JavaScript SDK, lakukan inisialisasi tampilan peta dan tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> diberi nama map_canvas dalam contoh di bawah ini.
Untuk menghindari kondisi race, tetapkan ID perjalanan untuk penyedia lokasi dalam callback yang dipanggil setelah peta diinisialisasi.
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);
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang perjalanan dari objek tugas menggunakan penyedia lokasi. Informasi meta mencakup PWT dan jarak yang tersisa sebelum penjemputan atau pengantaran. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.
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);
});
Menangani error
Error yang muncul secara asinkron saat meminta peristiwa error pemicu informasi perjalanan. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.
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);
});
Catatan: Pastikan untuk menggabungkan panggilan library dalam blok try...catch
untuk menangani error yang tidak terduga.
Hentikan pelacakan
Untuk mencegah penyedia lokasi melacak perjalanan, hapus ID perjalanan dari penyedia lokasi.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Menyesuaikan tampilan dan nuansa peta dasar
Untuk menyesuaikan tampilan dan nuansa komponen peta, tata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi secara langsung dalam kode.
Menggunakan gaya visual peta berbasis cloud
Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk setiap aplikasi yang menggunakan Google Maps dari Konsol Google Cloud, tanpa memerlukan perubahan pada kode.
Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke peta JavaScript SDK, tentukan mapId
dan mapOptions
lainnya saat Anda membuat JourneySharingMapView
. Kolom mapId
tidak dapat diubah
atau ditambahkan setelah JourneySharingMapView
dibuat instance-nya. Contoh berikut menunjukkan cara mengaktifkan gaya peta yang telah dibuat sebelumnya dengan ID peta.
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.
});
Menggunakan gaya visual peta berbasis kode
Cara lain untuk menyesuaikan gaya visual peta adalah dengan menetapkan mapOptions
saat Anda membuat JourneySharingMapView
.
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" }
]
}
]
}
});
Menggunakan penyesuaian penanda
Dengan JavaScript SDK, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh JavaScript SDK sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.
Penyesuaian yang paling sederhana adalah dengan menentukan objek MarkerOptions
yang akan diterapkan ke semua penanda dari jenis yang sama. Perubahan yang ditentukan dalam objek akan diterapkan setelah setiap penanda dibuat, yang menimpa opsi default apa pun.
Opsi yang lebih canggih adalah menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Progres Perjalanan dan Pesanan meneruskan data ke fungsi penyesuaian tentang jenis objek yang diwakili penanda: kendaraan, asal, titik jalan, atau tujuan. Hal ini kemudian memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda itu sendiri saat ini; misalnya, jumlah titik jalan yang tersisa hingga kendaraan menyelesaikan perjalanan. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.
JavaScript SDK menyediakan parameter penyesuaian berikut di FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Mengubah gaya penanda menggunakan MarkerOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan dengan objek MarkerOptions
. Ikuti pola ini untuk menyesuaikan gaya penanda menggunakan salah satu penyesuaian penanda yang tercantum sebelumnya.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Mengubah gaya visual penanda menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum sebelumnya.
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}`);
};
Menambahkan penanganan klik ke penanda
Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum sebelumnya.
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.
});
}
};
Menggunakan penyesuaian polyline
Dengan JavaScript SDK, Anda juga dapat menyesuaikan tampilan dan nuansa rute
perjalanan di peta. Library ini membuat objek google.maps.Polyline
untuk setiap pasangan koordinat dalam jalur kendaraan yang aktif atau tersisa.
Anda dapat menata gaya objek Polyline
dengan menentukan penyesuaian polyline. Selanjutnya,
library akan menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan
objek ke peta, dan saat data yang digunakan untuk objek telah berubah.
Serupa dengan penyesuaian penanda, Anda dapat menentukan kumpulan
PolylineOptions
untuk diterapkan ke semua objek Polyline
yang cocok saat
dibuat atau diupdate.
Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian
memungkinkan gaya individual objek berdasarkan data yang dikirim oleh Fleet Engine.
Fungsi ini dapat mengubah gaya setiap objek berdasarkan status kendaraan saat ini; misalnya, mewarnai objek Polyline
dengan tempat yang lebih dalam, atau membuatnya lebih tebal saat kendaraan melaju lebih lambat. Anda bahkan dapat bergabung dengan
sumber di luar Fleet Engine dan menata gaya objek Polyline
berdasarkan
informasi tersebut.
Anda dapat menentukan penyesuaian menggunakan parameter yang diberikan di
FleetEngineTripLocationProviderOptions
.
Anda dapat menetapkan penyesuaian untuk berbagai status jalur dalam perjalanan
kendaraan--sudah ditempuh, aktif bepergian, atau belum ditempuh. Parameternya adalah sebagai berikut:
takenPolylineCustomization
, untuk jalur yang telah ditempuh;activePolylineCustomization
, untuk jalur perjalanan yang aktif;remainingPolylineCustomization
, untuk jalur yang belum ditempuh.
Ubah gaya objek Polyline
menggunakan PolylineOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline
dengan
PolylineOptions
.
Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline
menggunakan salah satu penyesuaian polyline yang tercantum sebelumnya.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Mengubah gaya visual objek Polyline
menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya visual objek Polyline
yang aktif. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline
menggunakan salah satu parameter penyesuaian polyline yang tercantum sebelumnya.
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'});
});
}
};
Mengontrol visibilitas objek Polyline
Secara default, semua objek Polyline
terlihat. Untuk membuat objek Polyline
tidak terlihat, tetapkan properti visible
-nya:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Merender objek Polyline
berbasis traffic
Fleet Engine menampilkan data kecepatan traffic untuk jalur aktif dan yang tersisa untuk
kendaraan yang diikuti. Anda dapat menggunakan informasi ini untuk menata gaya objek Polyline
sesuai dengan kecepatan traffic-nya:
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'});
}
}
};
Menampilkan InfoWindow
untuk penanda lokasi atau kendaraan
Anda dapat menggunakan InfoWindow
untuk menampilkan informasi tambahan tentang kendaraan atau penanda lokasi.
Contoh berikut menunjukkan cara membuat InfoWindow
dan melampirkannya
ke penanda kendaraan:
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();
Nonaktifkan pengepasan otomatis
Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area tampilan dengan kendaraan dan rute yang diharapkan dengan menonaktifkan pemasangan otomatis. Contoh berikut menunjukkan cara menonaktifkan pemasangan otomatis saat Anda mengonfigurasi tampilan peta progres perjalanan dan pesanan.
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,
...
});
Mengganti peta yang ada
Anda dapat menggunakan JavaScript SDK untuk mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.
Misalnya, Anda memiliki halaman web dengan entitas google.maps.Map
standar tempat penanda ditampilkan:
<!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>
Untuk menambahkan JavaScript SDK:
- Tambahkan kode untuk factory token autentikasi.
- Lakukan inisialisasi penyedia lokasi di fungsi
initMap()
. - Lakukan inisialisasi tampilan peta dalam fungsi
initMap()
. Tampilan berisi peta. - Pindahkan penyesuaian Anda ke dalam fungsi callback untuk inisialisasi tampilan peta.
- Tambahkan library lokasi ke loader API.
Contoh berikut menunjukkan perubahan yang akan dilakukan:
<!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>
Jika Anda mengoperasikan perjalanan dengan ID yang ditentukan di dekat Uluru, perjalanan tersebut kini akan dirender di peta.