Capacitor Google Maps worked once

I was trying to integrate the Google Maps capacitor plugin to my project

First I used

npm install @capacitor/google-maps
npm install @capacitor/geolocation

After that I just grabbed the code snipped provided

import { GoogleMap } from "@capacitor/google-maps";
import { useRef } from "react";

const Map: React.FC = () => {
  const mapRef = useRef<HTMLElement>();
  let newMap: GoogleMap;

  async function createMap() {
    if (!mapRef.current) return;

    newMap = await GoogleMap.create({
      id: "my-cool-map",
      element: mapRef.current,
      apiKey: "process.env.APIKEYVALUE",
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }

  return (
    <div className="component-wrapper">
      <capacitor-google-map
        ref={mapRef}
        style={{
          display: "inline-block",
          width: "365px",
          height: "365px",
        }}
      ></capacitor-google-map>

      <button onClick={createMap}>Create Map</button>
    </div>
  );
};

export default Map;

It showed once, I was able to press the button and the map would appear, then I switched the map to be 100vh, 100vw to fit the screen, but it stopped working, now I’m getting this error in the console

[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\core.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\core.ts'    
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\grid.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\grid.ts'    
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\noop.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\noop.ts'    
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\supercluster.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\supercluster.ts'
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\utils.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\algorithms\utils.ts'  
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\cluster.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\cluster.ts'
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\markerclusterer.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\markerclusterer.ts'    
[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\overlay-view-safe.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\overlay-view-safe.ts'[react-scripts] WARNING in ./node_modules/@googlemaps/markerclusterer/dist/index.esm.js
[react-scripts] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[react-scripts] Failed to parse source map from 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\renderer.ts' file: Error: ENOENT: no such file or directory, open 'F:\PG2\tuc-tuc-ya\node_modules\@googlemaps\markerclusterer\src\renderer.ts'
[react-scripts] webpack compiled with 9 warnings
[INFO] Browser window opened to http://localhost:8100!

[react-scripts] Files successfully emitted, waiting for typecheck results...
[react-scripts] Issues checking in progress...
[react-scripts] No issues found.

Edit. My package.json

{
  "name": "tuc-tuc-ya",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^4.0.1",
    "@capacitor/app": "4.0.1",
    "@capacitor/core": "4.0.1",
    "@capacitor/geolocation": "^4.0.1",
    "@capacitor/google-maps": "^4.0.1",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/status-bar": "4.0.1",
    "@ionic/react": "^6.0.0",
    "@ionic/react-router": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.27.2",
    "ionicons": "^5.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "4.0.1"
  },
  "description": "An Ionic project"
}

And the map is not showing anymore!, I tried to revert all the changes, and now my TabOutlet is not switching to the Map component, and it can’t switch back to the home or profile screen either!

I really need help

remove code and start from scratch.

I can’t see what’s wrong! can you help me out?

Your error is pointing to markerCluster. Check what you did for the marker cluster. And you should be using px or % for the height/width of the map.