Closed Axelazo closed 2 years ago
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.
Describe the bug Error: "CapacitorGoogleMaps.initialize()" is not implemented on android
To Reproduce Steps to reproduce the behavior:
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");
};
const moveMapCameraTowardsDestinationPosition = async () => { let d = getDistanceFromLatLonInKm( destination.lat, destination.lng, position.lat, position.lng );
};
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 });
};
return (
); };
export default Mapview; `