ionic-team / ionic-team/ionic-native-google-maps

Error: GeocoderResult[] (Ionic 5 & Vue 3)

Open
#368 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
215
Forks
119
PR merge metrics
No merged PRs in 30d

Description

Hi, first of all. This is my first experience for using this cordova plugin (i am using capacitor v3).

```typescript
Argument of type '(results: GeocoderResult[]) => null | undefined' is not assignable to parameter of type '(value: GeocoderResult[] | BaseArrayClass) => PromiseLike | null | undefined'.
Types of parameters 'results' and 'value' are incompatible.
Type 'GeocoderResult[] | BaseArrayClass' is not assignable to type 'GeocoderResult[]'.
Type 'BaseArrayClass' is missing the following properties from type 'GeocoderResult[]': length, concat, join, shift, and 20 more.
159 | "lng": coordinates.value.coords.longitude
```

This error came up, when i decided to use this plugin with Ionic 5 & Vue 3. I have this error, that i couldn't find out the solution.

Here's my package.json (Open this up)

```json
"dependencies": {
"@capacitor/android": "3.3.2",
"@capacitor/app": "^1.0.6",
"@capacitor/core": "^3.3.2",
"@capacitor/dialog": "^1.0.2",
"@capacitor/geolocation": "^1.2.0",
"@capacitor/haptics": "^1.1.3",
"@capacitor/keyboard": "^1.1.3",
"@capacitor/local-notifications": "^1.0.9",
"@capacitor/status-bar": "^1.0.6",
"@ionic-native/core": "^5.22.0-beta-1",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",
"@ionic-native/native-geocoder": "^5.36.0",
"@ionic/vue": "~5.6.13",
"@ionic/vue-router": "~5.6.13",
"cordova-plugin-googlemaps": "^2.7.1",
"cordova-plugin-nativegeocoder": "^3.4.1",
"core-js": "^3.8.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@capacitor-community/sqlite": "^3.0.0-rc.2",
"@capacitor/cli": "^3.2.5",
"@ionic/app-scripts": "^3.2.4",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-e2e-cypress": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-unit-jest": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.0.4",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"copy-webpack-plugin": "^5.1.2",
"eslint": "~6.8.0",
"eslint-plugin-vue": "^7.0.0-0",
"jeep-sqlite": "^1.3.2",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"vue-sqlite-hook": "^2.1.4"
}
```

Here's my Vue component (Open this up)

```vue

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
Geocoder,
GeocoderResult,
Marker
} from '@ionic-native/google-maps';
import { defineComponent, ref } from "vue";

export default defineComponent({
.....
setup() {
// form values
const origin = ref<string>("");
const destination = ref<string>("");
const coordinates = ref<any>({});
const googleMap = ref<GoogleMap>();

const loadMap = () => {
Geocoder.geocode({
"position": {
"lat": coordinates.value.coords.latitude,
"lng": coordinates.value.coords.longitude
}
}).then((results: GeocoderResult[]) => {
if (results.length == 0) {
// Not found
return null;
}
let address: any = [
results[0].subThoroughfare || "",
results[0].thoroughfare || "",
results[0].locality || "",
results[0].adminArea || "",
results[0].postalCode || "",
results[0].country || ""].join(", ");
});
};

return {
....
// Data
origin,
destination,
...

// Methods
....
loadMap,
};
}
});

```

Sorry, i can't show you the full code, because. it's too long and it's not what i want to ask. But the issue what i am talking is about the error above this code. I could really use some help.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.