How to integrate Deck.gl correctly and add ArcLayers, markers,...

[Oussamabennabi]

I'm using this but i had to disable the keyboard shortcuts and also for the keyboard controller in DecgGL, because when i hold shit or control and start dragging the map will stay and the deck layer will start to move:

<APIProvider libraries={["places", "geometry"]} apiKey={GOOGLE_MAPS_API_KEY}>
        <DeckGL
          initialViewState={INITIAL_VIEW_STATE}
          controller={{
            dragRotate: false,
            doubleClickZoom: false,
            touchZoom: false,
            touchRotate: false
          }}
          style={{ width: "100%", height: "100%" }}
          layers={layers}
          getTooltip= {({object}) => object && `${object.from.name} to ${object.to.name}`}
          viewState={viewState}
          onViewStateChange={e => setViewState(e.viewState)}
        >
          <Map
            defaultCenter={{
              lat: INITIAL_VIEW_STATE.latitude,
              lng: INITIAL_VIEW_STATE.longitude,
            }}
            defaultZoom={INITIAL_VIEW_STATE.zoom}
            mapId={MAP_ID}
            gestureHandling={"greedy"}
            disableDefaultUI
            onCenterChanged={handleMapCenterChange}
            keyboardShortcuts={false}

          >
            {/* <DrawPlaceShape viewState={viewState}/> */}
            {/* <DestinationsLayer destinations={destinations} /> */}

            <DrawMarkers markers={mapData.markers} />
            <DrawPolygon
              strokeWeight={1.5}
              polygons={mapData.polygons.slice(1)}
            />
          </Map>
        </DeckGL>

        <DrawLogo />

        {currentCountry && (
          <MiniMap
            geometry={currentCountry.geometry}
            width={MINIMAP_WIDTH}
            height={MINIMAP_HIGHT}
            options={{
              strokeWeight: 1,
              fillColor: sand,
              fillOpacity: 0.8,
              strokeColor: "#8D725A",
              strokeOpacity: 1,
            }}
            name={currentCountry.properties.name}
            viewState={viewState}
            setViewState={setViewState}
          />
        )}

        <DrawCampusMapScale />
      </APIProvider>

[usefulthink]

I'd say the easiest way for the integration to work is to use the GoogleMapsOverlay, where the Google map will be in control of the movements of the virtual camera and DeckGL uses the camera provided by the Google map.

However, the other way around should work as well, but as you noticed, you need to disable any and all control inputs to the google maps instance.
I haven't looked at this for a bit (and I just noticed we'll have to provide an example for that as well), but I think you only need to set the controlled prop of the map, and remove all the other properties except for the mapId (that's at least how it's supposed to work).

Let me know if that works or if we have to fix something in the library.