google-maps

google-maps copied to clipboard

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 ( <IonPage> <IonContent fullscreen className="ion-padding ion-text-center ion-transparent" > <IonGrid className="search"> <IonRow> <IonCol className="destination"> <div className="dotStart"> <div className="dotEnd"> <div className="connectingLine"> </IonCol> <IonCol> <IonRow> <IonCol> <IonSearchbar value={fromSearchText} placeholder="Desde dónde?" onIonChange={(e) => setFromSearchText(e.detail.value!)} ></IonSearchbar> </IonCol> </IonRow> <IonRow> <IonCol> <IonSearchbar value={toSearchText} placeholder="A dónde vas?" onIonChange={(e) => setToSearchText(e.detail.value!)} ></IonSearchbar> </IonCol> </IonRow> </IonCol> </IonRow> <IonRow> <IonCol> <IonButton expand="block" onClick={moveMapCameraTowardsDestinationPosition} > SET MARKER AND MOVE CAMERA TOWARDS MARKER POSITION </IonButton> </IonCol> </IonRow> </IonGrid> <IonGrid className="map"> <div id="container" style={{ top: 0, left: 0, display: "block", width: "100vw", height: "100vh", }} > </IonGrid> </IonContent> </IonPage> ); };

export default Mapview; `