Google map not showing in mobile

Ionic Framework Ionic React
1

I don’t know what to do, I have been having issues with map not appearing on my app when i launch it but it is showing when i use localhost to view on the web. I make use of ionic, capacitor google map, reactjs and typescript for this project and the map is not showing in the apk and android emulator but when i view on web, it appears. I have tried all possible solutions like background transparency , etc searched the internet but yet to be fixed. It is very hard to see an ionic developer using reactjs, most are using angularjs and I am a reactjs developer. I will appreciate it if i can get help as soon as possible.

2

Until unless you provide us some code we won’t be able to help you.
I implemented Google Maps in my Ionic React project recently, it works fine for web, android and iOS.

1 Like
3

Which code do you need

4 
const createMap = async () => {
    if (!mapRef.current || mapInstance.current) return;


    
    // Create the map instance
    try {
      setIsMapLoading(true);
      mapInstance.current = (await Promise.race([
        GoogleMap.create({
          id: "google-map",
          element: mapRef.current,
          apiKey: mapKey,
          config: {
            center: {
              lat: latCoord || 0,
              lng: lngCoord || 0,
            },
            zoom: 10,
            mapTypeId: "terrain",
            disableDefaultUI: true,
          },
        }),
        new Promise((_, reject) => {
          setTimeout(() => reject(new Error("Map creation timeout")), 30000);
        }),
      ])) as GoogleMap;
      setIsMapLoading(false);
    } catch (error) {
      const errorMsg = `Map error: ${
        error instanceof Error ? error.message : String(error)
      }`;
      console.error(errorMsg);
      setErrorMessage(errorMsg);
      setIsMapLoading(false);
    }
  };

  // Display the error in JSX if it exists:

  useEffect(() => {
    let isMounted = true;
    if (
      latCoord === undefined ||
      latCoord === null ||
      lngCoord === undefined ||
      lngCoord === null
    ) {
      return;
    }
    const initializeMap = async () => {
      if (!mapRef.current) return;

      try {
        await createMap();
        if (!mapInstance.current || !isMounted) {
          return;
        }
        //check if Geolocation is enabled
        const checkLocationPermission = async () => {
          const status = await Geolocation.checkPermissions();
          if (status.location !== "granted") {
            await Geolocation.requestPermissions();
          }
        };
        if (mapInstance.current && isMounted) {
          await checkLocationPermission();
          await mapInstance.current.enableCurrentLocation(true);
        }
      } catch (error) {
        setErrorMessage(`Map initialization: ${error.message}`);
      }
    };
    initializeMap();
    return () => {
      isMounted = false;
      if (mapInstance.current) {
        mapInstance.current.destroy();
        mapInstance.current = null;
      }
    };
  }, [latCoord, lngCoord]);