Error: "CapacitorGoogleMaps.initialize()" is not implemented on android

[Axel Aguilar]

Describe the bug
Error: "CapacitorGoogleMaps.initialize()" is not implemented on android

To Reproduce
Steps to reproduce the behavior:

1. Clean Ionic v6 project (tabs, React) + Capacitor v4
2. Add map to Tab3

Expected behavior
Show the map

Screenshots

Additional context

Package.json:

`{
"name": "tuc-tuc-ya",
"version": "0.0.1",
"private": true,
"dependencies": {
"@capacitor-community/google-maps": "^2.0.0-beta.1",
"@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": "GENERATE_SOURCEMAP=false 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"
}
`

capacitor.config.t:
`import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'Tuc Tuc Ya!',
webDir: 'build',
bundledWebRuntime: false
};

export default config;
`

Mapview.tsx
`import React, { useState } from "react";
import {
IonButton,
IonCol,
IonContent,
IonGrid,
IonPage,
IonRow,
IonSearchbar,
useIonViewWillEnter,
useIonViewWillLeave,
} from "@ionic/react";
import { Geolocation } from "@capacitor/geolocation";
import { CapacitorGoogleMaps } from "@capacitor-community/google-maps";
import { Capacitor } from "@capacitor/core";
import { useRef, useEffect } from "react";
import "./Mapview.css";

const Mapview: React.FC = () => {
const [fromSearchText, setFromSearchText] = useState("");
const [toSearchText, setToSearchText] = useState("");

const [destination, setDestination] = useState({
lat: 16.9305,
lng: -89.8911,
});

const [position, setPosition] = useState({
lat: 16.911597,
lng: -89.887305,
});

useIonViewWillEnter(() => {
initializeMap();
moveMapCameraTowardsUser();
});

const moveMapCameraTowardsUser = async () => {
console.log("Moving camera to given position");

let currentPosition = await Geolocation.getCurrentPosition();

setPosition({
  lat: currentPosition.coords.latitude,
  lng: currentPosition.coords.longitude,
});

let newCenter = {
  lat: currentPosition.coords.latitude,
  lng: currentPosition.coords.longitude,
};

console.log(newCenter);

};

const moveMapCameraTowardsDestinationPosition = async () => {
let d = getDistanceFromLatLonInKm(
destination.lat,
destination.lng,
position.lat,
position.lng
);

console.log(`Distance as the crow flies is ${d} km`);

};

function getRandomInRange(from: any, to: any, fixed: any) {
/* let lat = getRandomInRange(-180, 180, 3);
let lng = getRandomInRange(-180, 180, 3); */
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
// .toFixed() returns string, so ' * 1' is a trick to convert to number
}

function getDistanceFromLatLonInKm(
lat1: any,
lon1: any,
lat2: any,
lon2: any
) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2 - lat1); // deg2rad below
var dLon = deg2rad(lon2 - lon1);
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) *
Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // Distance in km
return d;
}

function deg2rad(deg: any) {
return deg * (Math.PI / 180);
}

const initializeMap = async () => {
// first of all, you should initialize the Maps SDK:
await CapacitorGoogleMaps.initialize({
key: "API KEY REPLACED ",
devicePixelRatio: window.devicePixelRatio, // this line is very important
});

// then get the element you want to attach the Maps instance to:
const element: any = document.getElementById("container");

// afterwards get its boundaries like so:
const boundingRectangle = element.getBoundingClientRect();

const width = boundingRectangle ? Math.round(boundingRectangle.width) : 200;
const height = boundingRectangle
  ? Math.round(boundingRectangle.height)
  : 200;
const x = boundingRectangle ? Math.round(boundingRectangle.x) : 200;
const y = boundingRectangle ? Math.round(boundingRectangle.y) : 200;
// we can now create the map using the boundaries of #container
try {
  const result = await CapacitorGoogleMaps.createMap({
    cameraPosition: {
      target: {
        latitude: position.lat,
        longitude: position.lng,
      },
      zoom: 14.8,
      bearing: 0,
    },
    boundingRect: {
      width: width,
      height: height,
      x: x,
      y: y,
    },
  });

  // remove background, so map can be seen
  // (you can read more about this in the "Setting up the WebView" guide)
  element.style.background = "";

  // finally set `data-maps-id` attribute for delegating touch events
  element.setAttribute("data-maps-id", result.googleMap.mapId);

  alert("Map loaded successfully");
} catch (e) {
  alert("Map failed to load");
}

};

return (

<IonSearchbar
value={fromSearchText}
placeholder="Desde dónde?"
onIonChange={(e) => setFromSearchText(e.detail.value!)}
>




<IonSearchbar
value={toSearchText}
placeholder="A dónde vas?"
onIonChange={(e) => setToSearchText(e.detail.value!)}
>







SET MARKER AND MOVE CAMERA TOWARDS MARKER POSITION





<div
id="container"
style={{
top: 0,
left: 0,
display: "block",
width: "100vw",
height: "100vh",
}}
>



);
};

export default Mapview;
`

[Tafel]

You have both @capacitor-community/google-maps and @capacitor/google-maps installed. They are two very different repositories and will probably not work very nice together. You should make a choice between the two and stick to that one.