Sorry for my late reply. I did some research and experiments on what you wrote. First of all, I would like to give version information about my project.
The project is written with Meteor.js + Svelte.js.
Meteor version: 2.15
Cordova Android Version: 12.0.1
Android phone I use: Mi A3 Android 11
userAgent: Mozilla/5.0 (Linux; Android 11; Mi A3 Build/RKQ1.200903.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/122.0.6261.119 Mobile Safari/537.36
Android emulator I use: Android 12
userAgent: Mozilla/5.0 (Linux; Android 12; sdk_gphone64_arm64 Build/S2B2.211203.006; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/91.0.4472.114 Mobile Safari/537.36
package.json
{
"dependencies": {
"@babel/runtime": "^7.20.6",
"@googlemaps/js-api-loader": "^1.16.6",
"@material-tailwind/html": "^2.2.2",
"@sentry/svelte": "^7.108.0",
"autoprefixer": "^10.4.17",
"bcrypt": "^5.1.0",
"cheerio": "^1.0.0-rc.12",
"classnames": "^2.5.1",
"daisyui": "^4.7.2",
"dayjs": "^1.11.9",
"meteor-node-stubs": "^1.2.5",
"notiflix": "^3.2.6",
"postcss": "^8.4.33",
"postcss-load-config": "^5.0.2",
"simpl-schema": "^3.4.1",
"svelte": "^3.54.0",
"svelte-preprocess": "^5.1.3",
"tailwindcss": "^3.4.1",
"tippy.js": "^6.3.7",
"toastify-js": "^1.12.0"
},
"devDependencies": {
"@types/google.maps": "^3.55.5",
"@types/jquery": "^3.5.16",
"@types/toastify-js": "^1.11.1",
"tinro": "^0.6.12",
"typescript": "^5.2.2"
},
"meteor": {
"mainModule": {
"client": "client/main.js"
},
"nodeModules": {
"recompile": {
"svelte": [
"legacy"
]
}
},
"testModule": "tests/main.js"
},
"svelte:compiler": {
"extensions": [
"svelte",
"html"
],
"hydratable": false,
"css": false
}
}
versions
accounts-2fa@2.0.2
accounts-base@2.2.10
accounts-password@2.4.0
allow-deny@1.1.1
autoupdate@1.8.0
babel-compiler@7.10.5
babel-runtime@1.5.1
base64@1.0.12
binary-heap@1.0.11
boilerplate-generator@1.7.2
caching-compiler@1.2.2
callback-hook@1.5.1
check@1.3.2
ddp@1.4.1
ddp-client@2.6.1
ddp-common@1.4.0
ddp-rate-limiter@1.2.1
ddp-server@2.7.0
diff-sequence@1.1.2
dynamic-import@0.7.3
ecmascript@0.16.8
ecmascript-runtime@0.8.1
ecmascript-runtime-client@0.12.1
ecmascript-runtime-server@0.11.0
ejson@1.1.3
email@2.2.5
es5-shim@4.8.0
fetch@0.1.4
geojson-utils@1.0.11
hot-code-push@1.0.4
hot-module-replacement@0.5.3
id-map@1.1.1
inter-process-messaging@0.1.1
launch-screen@2.0.0
localstorage@1.2.0
logging@1.3.3
mdg:validated-method@1.3.0
meteor@1.11.5
meteor-base@1.5.1
minifier-css@1.6.4
minifier-js@2.7.5
minimongo@1.9.3
mobile-experience@1.1.1
mobile-status-bar@1.1.0
modern-browsers@0.1.10
modules@0.20.0
modules-runtime@0.13.1
modules-runtime-hot@0.14.2
mongo@1.16.8
mongo-decimal@0.1.3
mongo-dev-server@1.1.0
mongo-id@1.0.8
npm-mongo@4.17.2
ordered-dict@1.1.0
percolate:migrations@1.1.1
promise@0.12.2
random@1.2.1
rate-limit@1.1.1
react-fast-refresh@0.2.8
reactive-dict@1.3.1
reactive-var@1.0.12
reload@1.3.1
retry@1.1.0
routepolicy@1.1.1
sha@1.0.9
shell-server@0.5.0
socket-stream-client@0.5.2
standard-minifier-css@1.9.2
standard-minifier-js@2.8.1
tracker@1.3.3
typescript@4.9.5
underscore@1.6.0
universe:i18n@2.1.0
url@1.3.2
webapp@1.13.8
webapp-hashing@1.1.1
zodern:melte@1.7.0
zodern:melte-compiler@1.4.0
zodern:types@1.0.11
client/main.js
import { Loader } from '@googlemaps/js-api-loader'
Meteor.startup(() => {
AppUtil.loader = new Loader({
apiKey: 'API_KEY', // Meteor.settings.public.google[Meteor.isCordova ? 'android' : 'web'].apiKey,
version: 'weekly',
libraries: ['geometry', 'places', 'maps', 'marker'],
})
})
map.svelte
const initMap = async function () {
const el = document.getElementById('map')
if (!el || !AppUtil.loader) {
loadingOverlay.hide()
return
}
loadingOverlay.show()
const { Map } = await AppUtil.loader.importLibrary('maps')
const { PlacesService } = await AppUtil.loader.importLibrary('places')
const { AdvancedMarkerElement, PinElement } = await AppUtil.loader.importLibrary('marker')
const map = new Map(el, {
center: { lat: latitude, lng: longitude },
zoom: 14,
mapId: Meteor.settings.public.google.mapId,
})
...
As far as I understand, we need to support es20 features for cordova. First I searched about changing webview, I found some plugins and some work on this on iOS side but they are not maintained. Then I thought of polyfill
(https://polyfill.io/v3/polyfill.js?features=default) but I am not sure if it works properly. Also, I think the code you gave below works only on the server side, I don’t understand how I should use it. As a result, I am in a dead end, does this problem exist in cordova other than meteor? Also, cordova has removed node 14 support with version 12.0.1, could this be a conflict on the meteor side? This topic confused me a lot, I apologize for my ridiculous questions.