このドキュメントでは、地図のルックアンドフィールをカスタマイズし、データの表示とビューポートのオプションを制御する方法について説明します。その方法は次のとおりです。
- クラウドベースの地図のスタイル機能を使用する
- 地図のスタイル オプションを独自のコードで直接設定する
Cloud ベースのマップのスタイル設定機能で地図のスタイルを設定する
JavaScript コンシューマーの乗車共有地図に地図のスタイルを適用するには、
mapId と
その他の
mapOptions
を作成するときに JourneySharingMapView を指定します。
次の例は、マップ ID を使用して地図のスタイルを適用する方法を示しています。
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
独自のコードで地図のスタイルを直接設定する
JourneySharingMapView を作成するときに地図のオプションを設定して、地図のスタイルをカスタマイズすることもできます。次の例は、地図のオプションを使用して地図のスタイルを設定する方法を示しています。設定できる地図のオプションの詳細については、
mapOptions
Google Maps JavaScript API リファレンスをご覧ください。
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" }
]
}
]
}
});
地図に情報を表示する
InfoWindow を使用して、車両または位置マーカーに関する追加情報を表示します。詳細については、
InfoWindow をご覧ください。
次の例は、InfoWindow を作成して車両マーカーにアタッチする方法を示しています。
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();
自動調整を無効にする
自動調整を無効にすると、地図が車両と予測ルートに合わせてビューポートを自動的に調整することを停止できます。次の例は、乗車共有地図ビューを構成するときに自動調整を無効にする方法を示しています。
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,
...
});