2 files changed, 23 insertions, 12 deletions
diff --git a/src/map/core/useMapStyles.js b/src/map/core/useMapStyles.js
index 1f7e2295..dd4a039c 100644
--- a/src/map/core/useMapStyles.js
+++ b/src/map/core/useMapStyles.js
@@ -90,6 +90,7 @@ export default () => {
         attribution: '© Google',
       }),
       available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'googleSatellite',
@@ -100,16 +101,18 @@ export default () => {
         attribution: '© Google',
       }),
       available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'googleHybrid',
       title: t('mapGoogleHybrid'),
       style: styleCustom({
-        tiles: [0, 1, 2, 3].map((i) => `https://mt${i}.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga`),
+        tiles: [`google://satellite/{z}/{x}/{y}?key=${googleKey}&layerType=layerRoadmap`],
         maxZoom: 20,
         attribution: '© Google',
       }),
-      available: true,
+      available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'mapTilerBasic',
diff --git a/src/map/overlay/useMapOverlays.js b/src/map/overlay/useMapOverlays.js
index dafb5f83..18218128 100644
--- a/src/map/overlay/useMapOverlays.js
+++ b/src/map/overlay/useMapOverlays.js
@@ -17,6 +17,7 @@ const sourceOpenWeather = (style, key) => sourceCustom([
 export default () => {
   const t = useTranslation();
 
+  const googleKey = useAttributePreference('googleKey');
   const openWeatherKey = useAttributePreference('openWeatherKey');
   const tomTomKey = useAttributePreference('tomTomKey');
   const hereKey = useAttributePreference('hereKey');
@@ -24,6 +25,13 @@ export default () => {
 
   return useMemo(() => [
     {
+      id: 'googleTraffic',
+      title: t('mapGoogleTraffic'),
+      source: sourceCustom([`google://satellite/{z}/{x}/{y}?key=${googleKey}&layerType=layerTraffic&overlay=true`]),
+      available: Boolean(googleKey),
+      attribute: 'googleKey',
+    },
+    {
       id: 'openSeaMap',
       title: t('mapOpenSeaMap'),
       source: sourceCustom(['https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png']),
@@ -39,49 +47,49 @@ export default () => {
       id: 'openWeatherClouds',
       title: t('mapOpenWeatherClouds'),
       source: sourceOpenWeather('clouds_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherPrecipitation',
       title: t('mapOpenWeatherPrecipitation'),
       source: sourceOpenWeather('precipitation_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherPressure',
       title: t('mapOpenWeatherPressure'),
       source: sourceOpenWeather('pressure_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherWind',
       title: t('mapOpenWeatherWind'),
       source: sourceOpenWeather('wind_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherTemperature',
       title: t('mapOpenWeatherTemperature'),
       source: sourceOpenWeather('temp_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'tomTomFlow',
       title: t('mapTomTomFlow'),
       source: sourceCustom([`https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key=${tomTomKey}`]),
-      available: !!tomTomKey,
+      available: Boolean(tomTomKey),
       attribute: 'tomTomKey',
     },
     {
       id: 'tomTomIncidents',
       title: t('mapTomTomIncidents'),
       source: sourceCustom([`https://api.tomtom.com/traffic/map/4/tile/incidents/s3/{z}/{x}/{y}.png?key=${tomTomKey}`]),
-      available: !!tomTomKey,
+      available: Boolean(tomTomKey),
       attribute: 'tomTomKey',
     },
     {
@@ -90,14 +98,14 @@ export default () => {
       source: sourceCustom(
         [1, 2, 3, 4].map((i) => `https://${i}.traffic.maps.ls.hereapi.com/maptile/2.1/flowtile/newest/normal.day/{z}/{x}/{y}/256/png8?apiKey=${hereKey}`),
       ),
-      available: !!hereKey,
+      available: Boolean(hereKey),
       attribute: 'hereKey',
     },
     {
       id: 'custom',
       title: t('mapOverlayCustom'),
       source: sourceCustom(customMapOverlay),
-      available: !!customMapOverlay,
+      available: Boolean(customMapOverlay),
     },
-  ], [t, openWeatherKey, tomTomKey, hereKey, customMapOverlay]);
+  ], [t, googleKey, openWeatherKey, tomTomKey, hereKey, customMapOverlay]);
 };