This document covers how to customize the look and feel of a map and control
data visibility and viewport options. You can do this in the following ways:
Use cloud-based map styling
Set map style options directly in your own code
Style the map with cloud-based maps styling
To apply a map style to your JavaScript consumer trip sharing map, specify amapIdand
any othermapOptionswhen you create theJourneySharingMapView.
The following examples show how to apply a map style with a map ID.
JavaScript
constmapView=newgoogle.maps.journeySharing.JourneySharingMapView({element:document.getElementById('map_canvas'),locationProviders:[locationProvider],mapOptions:{mapId:'YOUR_MAP_ID'}// Any other styling options.});
TypeScript
constmapView=newgoogle.maps.journeySharing.JourneySharingMapView({element:document.getElementById('map_canvas'),locationProviders:[locationProvider],mapOptions:{mapId:'YOUR_MAP_ID'}// Any other styling options.});
Style maps directly in your own code
You can also customize map styling by setting map options when you create theJourneySharingMapView. The following examples show how to style a map using
map options. For more information on what map options you can set, seemapOptionsin the Google Maps JavaScript API reference.
Display additional information about a vehicle or location marker using anInfoWindow. For more information, seeInfoWindow.
The following example shows how to create anInfoWindowand attach it
to a vehicle marker:
JavaScript
// 1. Create an info window.constinfoWindow=newgoogle.maps.InfoWindow({disableAutoPan:true});locationProvider.addListener('update',e=>{conststopsCount=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.constmarker=mapView.vehicleMarkers[0];infoWindow.open(mapView.map,marker);});// 3. Close the info window.infoWindow.close();
TypeScript
// 1. Create an info window.constinfoWindow=newgoogle.maps.InfoWindow({disableAutoPan:true});locationProvider.addListener('update',(e:google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent)=>{conststopsCount=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.constmarker=mapView.vehicleMarkers[0];infoWindow.open(mapView.map,marker);});// 3. Close the info window.infoWindow.close();
Disable automatic fitting
You can stop the map from automatically fitting the viewport to the vehicle
and anticipated route by disabling automatic fitting. The following example
shows how to disable automatic fitting when you configure the journey sharing
map view.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis documentation explains how to customize the appearance of maps in journey sharing by using cloud-based map styling or setting style options directly in your code.\u003c/p\u003e\n"],["\u003cp\u003eYou can style maps using cloud-based map styling through the Google Cloud console or by setting style options in your code for \u003ccode\u003eConsumerMapView\u003c/code\u003e and \u003ccode\u003eConsumerMapFragment\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eIn JavaScript, you can style your consumer trip sharing map by specifying a \u003ccode\u003emapId\u003c/code\u003e and other \u003ccode\u003emapOptions\u003c/code\u003e when creating the \u003ccode\u003eJourneySharingMapView\u003c/code\u003e, or by directly setting map options in your code.\u003c/p\u003e\n"],["\u003cp\u003eYou can display additional information using \u003ccode\u003eInfoWindow\u003c/code\u003e, and control the viewport by disabling automatic fitting to the vehicle and route.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/style \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/style \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/style \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nThis document covers how to customize the look and feel of a map and control\ndata visibility and viewport options. You can do this in the following ways:\n\n- Use cloud-based map styling\n- Set map style options directly in your own code\n\nStyle the map with cloud-based maps styling\n\nTo apply a map style to your JavaScript consumer trip sharing map, specify a\n[`mapId`](/maps/documentation/javascript/reference/map#MapOptions.mapId) and\nany other\n[`mapOptions`](/maps/documentation/javascript/reference/map#MapOptions)\nwhen you create the `JourneySharingMapView`.\n| **Note:** You cannot change or add a `mapId` after the `JourneySharingMapView` has been instantiated.\n\nThe following examples show how to apply a map style with a map ID.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n const mapView = new google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n mapOptions: {\n mapId: 'YOUR_MAP_ID'\n }\n // Any other styling options.\n });\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n const mapView = new google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n mapOptions: {\n mapId: 'YOUR_MAP_ID'\n }\n // Any other styling options.\n });\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nStyle maps directly in your own code\n\nYou can also customize map styling by setting map options when you create the\n`JourneySharingMapView`. The following examples show how to style a map using\nmap options. For more information on what map options you can set, see\n[`mapOptions`](/maps/documentation/javascript/reference/map#MapOptions)\nin the Google Maps JavaScript API reference.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n const mapView = new google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n mapOptions: {\n styles: [\n {\n \"featureType\": \"road.arterial\",\n \"elementType\": \"geometry\",\n \"stylers\": [\n { \"color\": \"#CCFFFF\" }\n ]\n }\n ]\n }\n });\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n const mapView = new google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n mapOptions: {\n styles: [\n {\n \"featureType\": \"road.arterial\",\n \"elementType\": \"geometry\",\n \"stylers\": [\n { \"color\": \"#CCFFFF\" }\n ]\n }\n ]\n }\n });\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nDisplay information on the map\n\nDisplay additional information about a vehicle or location marker using an\n`InfoWindow`. For more information, see\n[`InfoWindow`](/maps/documentation/javascript/infowindows).\n\nThe following example shows how to create an `InfoWindow` and attach it\nto a vehicle marker: \n\nJavaScript \n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', e =\u003e {\n const stopsCount = e.trip.remainingWaypoints.length;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\nTypeScript \n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) =\u003e {\n const stopsCount = e.trip.remainingWaypoints.length;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\nDisable automatic fitting\n\nYou can stop the map from automatically fitting the viewport to the vehicle\nand anticipated route by disabling automatic fitting. The following example\nshows how to disable automatic fitting when you configure the journey sharing\nmap view. \n\nJavaScript \n\n const mapView = new\n google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n automaticViewportMode:\n google.maps.journeySharing\n .AutomaticViewportMode.NONE,\n ...\n });\n\nTypeScript \n\n const mapView = new\n google.maps.journeySharing.JourneySharingMapView({\n element: document.getElementById('map_canvas'),\n locationProviders: [locationProvider],\n automaticViewportMode:\n google.maps.journeySharing\n .AutomaticViewportMode.NONE,\n ...\n });\n\nWhat's next\n\n[Customize markers](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers)"]]
