Capacitor Google Maps worked once

Axelazo · August 2, 2022, 1:26pm

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

Hills90210 · August 2, 2022, 1:30pm

remove code and start from scratch.

Axelazo · August 2, 2022, 2:10pm

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

Hills90210 · August 2, 2022, 2:57pm

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.

baifeng · November 7, 2022, 9:14am

Hello, @Axelazo Did you solve the issue?
I am also facing the same error. my map is disappearing after map is rendered.
plz share if you find the solution.

thanks.

Topic		Replies	Views
Google Maps Capacitor not working on iOS Ionic Angular	13	4266	July 23, 2023
Capacitor/google-maps 5.3.0 error Ionic React	1	706	August 22, 2023
Announcing the Capacitor Google Maps Plugin Capacitor	30	3755	May 19, 2022
Capacitor google map Capacitor	4	446	April 30, 2024
Capacitor Google Maps Scrolling and gesture handling Capacitor	0	231	March 18, 2024

Capacitor Google Maps worked once

Related topics