Para personalizar el aspecto del componente de mapas, define el diseño de tu mapa con el diseño de mapas basado en Cloud o configurando opciones directamente en el código.
Personaliza el mapa con el diseño de mapas basado en Cloud
Personalizar la apariencia del componente de mapas con mapas basados en la nube estilo. Puedes crear y editar diseños de mapa en la consola de Google Cloud de cualquier de las aplicaciones que usan Google Maps, sin necesidad de realizar cambios en el código. Para obtener más información, consulta Diseño de mapas basado en Cloud.
Tanto el
ConsumerMapView
y las
ConsumerMapFragment
clases admiten el diseño de mapas basado en Cloud.
Para usar el diseño de mapas basado en Cloud, asegúrate de que los mapas seleccionados
El procesador es LATEST
. En las siguientes secciones, se muestran ejemplos de cómo usar
diseño de mapas basado en Cloud con tu proyecto.
ConsumerMapView
Para utilizar el diseño de mapas basado en Cloud en ConsumerMapView
, configura la
mapId
en GoogleMapOptions
y pasa GoogleMapOptions
a
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Ejemplo
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
Hay dos formas de utilizar el diseño de mapas basado en Cloud en ConsumerMapFragments:
- De forma estática, con el XML.
- De forma dinámica con
newInstance
De forma estática con el XML
Para utilizar el diseño de mapas basado en Cloud con el XML en el archivo
ConsumerMapFragment
, agrega el atributo XML map:mapId
con el valor especificado
mapId
Consulta el siguiente ejemplo:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
De forma dinámica con newInstance
Para utilizar el diseño de mapas basado en Cloud con newInstance
en
ConsumerMapFragment
, configura el campo mapId
en GoogleMapOptions
y pasa el
GoogleMapOptions
a newInstance
. Consulta el siguiente ejemplo:
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
Para aplicar un diseño de mapa a tu mapa de JavaScript para compartir el recorrido del consumidor, especifica un
mapId
y
Cualquier otro
mapOptions
cuando crees el JourneySharingMapView
.
En los siguientes ejemplos, se muestra cómo aplicar un diseño de mapa con un ID de mapa.
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.
});
Diseña mapas directamente en tu propio código
También puedes personalizar el diseño del mapa estableciendo opciones del mapa cuando creas el
JourneySharingMapView
En los siguientes ejemplos, se muestra cómo aplicar el diseño
opciones de mapas. Para obtener más información sobre las opciones de mapa que puedes configurar, consulta
mapOptions
en la referencia de la 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" }
]
}
]
}
});
Inhabilitar el ajuste automático
Puedes impedir que el mapa ajuste automáticamente el viewport al vehículo. y la ruta prevista si inhabilitas el ajuste automático. El siguiente ejemplo se muestra cómo inhabilitar el ajuste automático cuando configuras el recorrido compartido vista de mapa.
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,
...
});
Cómo reemplazar un mapa existente
Puedes reemplazar un mapa existente que incluya marcadores o cualquier otra personalización. sin perder esas personalizaciones.
Por ejemplo, supongamos que tienes una página web con un elemento google.maps.Map
estándar.
entidad en la que se muestra un marcador:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
Para agregar la biblioteca de seguimiento de la flota de JavaScript, haz lo siguiente:
- Agrega el código para la fábrica del token de autenticación.
- Inicializa un proveedor de ubicación en la función
initMap()
. - Inicializa la vista de mapa en la función
initMap()
. La vista contiene el mapa. - Mueve tu personalización a la función de devolución de llamada para inicializar la vista de mapa.
- Agrega la biblioteca de ubicaciones al cargador de API.
Ejemplo de reemplazo de mapas con tareas programadas
En los siguientes ejemplos, se muestra la manera de usar un mapa existente en el que se inicializa
el objeto del proveedor de ubicación para un caso de uso de una tarea programada. El código es similar
para casos de uso de viajes a pedido, excepto que usas la
FleetEngineVehicleLocationProvider
en lugar del
FleetEngineDeliveryVehicleLocationProvider
<!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
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. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
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
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, 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 journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Si conduce un vehículo de reparto con la especificado cerca del Muelle 39, ahora se representa en el mapa.