diff --git a/google-basemap/index.html b/google-basemap/index.html
index c1c4a07..8e010e7 100644
--- a/google-basemap/index.html
+++ b/google-basemap/index.html
@@ -37,7 +37,7 @@ <h3>World population</h3>
         <div class="basemap-selector">
           <img class="basemap-button" data-map-id="ea84ae4203ef21cd" src="./images/positron.jpg" alt="positron">
           <img class="basemap-button" data-map-id="2fccc3b36c22a0e2" src="./images/dark-matter.jpg" alt="Dark Matter">
-          <img class="basemap-button" data-map-id="885caf1e15bb9ef2" src="./images/voyager.jpg" alt="Voyager">
+          <img class="basemap-button" data-map-id="885caf1e15bb9ef2"  src="./images/voyager.jpg" alt="Voyager">
         </div>
         <p class="overline">Google Base Maps</p>
         <div class="basemap-selector">
diff --git a/google-basemap/index.ts b/google-basemap/index.ts
index 579366c..8e3cede 100644
--- a/google-basemap/index.ts
+++ b/google-basemap/index.ts
@@ -1,14 +1,17 @@
 import './style.css';
-import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps';
-import {colorCategories} from '@deck.gl/carto';
-import {VectorTileLayer, vectorQuerySource} from '@deck.gl/carto';
+import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps/typed';
+import {CartoLayer, colorCategories, setDefaultCredentials, MAP_TYPES} from '@deck.gl/carto/typed';
 import {Loader} from '@googlemaps/js-api-loader';
 
 const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 const accessToken = import.meta.env.VITE_API_ACCESS_TOKEN;
 const connectionName = 'carto_dw';
-const cartoConfig = {apiBaseUrl, accessToken, connectionName};
+
+setDefaultCredentials({
+  apiBaseUrl,
+  accessToken
+})
 
 let googleMapsLib: google.maps.MapsLibrary
 let map: google.maps.Map;
@@ -48,19 +51,16 @@ function getColorForContinent() {
 }
 
 function render() {
-  const source = vectorQuerySource({
-    ...cartoConfig,
-    sqlQuery: `SELECT geom, country_name, continent_name, pop_2015 FROM cartobq.public_account.world_population_2015 WHERE pop_2015 between @min and @max ORDER BY pop_2015 DESC`,
-    queryParameters: {
-      min: Number(1),
-      max: selectedMaxPopulation
-    }
-  });
-
   const layers = [
-    new VectorTileLayer({
+    new CartoLayer({
       id: 'population',
-      data: source,
+      connection: connectionName,
+      type: MAP_TYPES.QUERY,
+      data: `SELECT geom, country_name, continent_name, pop_2015 FROM cartobq.public_account.world_population_2015 WHERE pop_2015 between @min and @max ORDER BY pop_2015 DESC`,
+      queryParameters: {
+        min: Number(1),
+        max: selectedMaxPopulation
+      },
       opacity: 1,
       pickable: true,
       getFillColor: getColorForContinent(),
@@ -100,6 +100,8 @@ basemapSelectorButtons!.forEach(button => {
       button.classList.remove('selected');
     });
 
+    console.log(mapId, mapTypeId)
+
     setBasemap(mapTypeId, mapId);
     render();
 
@@ -115,15 +117,15 @@ function setBasemap(mapTypeId: string | null, mapId: string | null ) {
   
   const center = map ? map.getCenter() : {lat: 15, lng: 10};
   const zoom = map ? map.getZoom() : 3;
+  const mapOpts = mapId ? {mapId} : {mapTypeId};
 
   map = new googleMapsLib.Map(document.getElementById('map') as HTMLElement, {
     center,
     zoom,
-    mapId,
-    mapTypeId,
     mapTypeControl: false,
     streetViewControl: false,
-    disableDefaultUI: true
+    disableDefaultUI: true,
+    ...mapOpts
   });
 
   if (overlay)  {
diff --git a/google-basemap/package.json b/google-basemap/package.json
index 0d5426d..26f40d9 100644
--- a/google-basemap/package.json
+++ b/google-basemap/package.json
@@ -13,15 +13,15 @@
     "vite": "^4.5.0"
   },
   "dependencies": {
-    "@deck.gl/google-maps": "^9.0.0-alpha.5",
+    "@deck.gl/google-maps": "^8.9.32",
     "@googlemaps/js-api-loader": "^1.16.2",
-    "@deck.gl/aggregation-layers": "^9.0.0-alpha.5",
-    "@deck.gl/carto": "^9.0.0-alpha.5",
-    "@deck.gl/core": "^9.0.0-alpha.5",
-    "@deck.gl/extensions": "^9.0.0-alpha.5",
-    "@deck.gl/geo-layers": "^9.0.0-alpha.5",
-    "@deck.gl/layers": "^9.0.0-alpha.5",
-    "@deck.gl/mesh-layers": "^9.0.0-alpha.5",
+    "@deck.gl/aggregation-layers": "^8.9.32",
+    "@deck.gl/carto": "^8.9.32",
+    "@deck.gl/core": "^8.9.32",
+    "@deck.gl/extensions": "^8.9.32",
+    "@deck.gl/geo-layers": "^8.9.32",
+    "@deck.gl/layers": "^8.9.32",
+    "@deck.gl/mesh-layers": "^8.9.32",
     "maplibre-gl": "^3.5.2"
   }
 }