Develop Reference

Vue Google Maps - JavaScript API error: NotLoadingAPIFromGoogleMapsError

hi im trying to add my api key to my google map. when i used the string version of the key everything was fine, but i don't want to do that i would like to keep the key in my .env file. However when i make that change i can't get the Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError. any help would be greatly appreciated!
thanks
*edit i just noticed that this issue is happening when i try to load the api key from my .env file. when i swap out the line with process.env.VUE_APP_GOOOGLEMAPS_KEY; and paste in the actual api key the map loads just fine.
MapPage.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Map</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<GoogleMap :api-key="API_KEY" style="width: 100%; height: 500px" :center="center" :zoom="15">
<Marker :options="{ position: center }" />
</GoogleMap>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '#ionic/vue';
import { GoogleMap, Marker } from "vue3-google-map";
export default {
name: 'MapPage',
components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, GoogleMap, Marker },
setup() {
const center = { lat: 40.689247, lng: -74.044502 };
const API_KEY = process.env.VUE_APP_GOOOGLEMAPS_KEY;
return { center,API_KEY };
},
};
</script>

NotLoadingAPIFromGoogleMapError
The Maps JavaScript API must be downloaded directly from Google's servers.
The script element that loads the Maps JavaScript API is not being included correctly on your page. In order for the API to work correctly, it must be loaded directly from
https://maps.googleapis.com.
See Loading the Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript
It also occurs when using the original location for the google maps API (which worked for years):
http://maps.google.com/maps/api/js
Changing that to (per the documentation link above):
https://maps.googleapis.com/maps/api/js

react leaflet -layer control -satellite view

I want to use the leaflet map on my react project and I would like to add a layer control where the user can switch between street view and satellite view.
I am trying to use google satellite view, but it doesn't seem to work.
Here is my code
function App() {
return (
<div className="App">
<MapContainer center={[40.44695, -345.23437]} zoom={2}>
<LayersControl>
<BaseLayer checked name="OpenStreetMap">
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
</BaseLayer>
<BaseLayer name="Satellite View">
<TileLayer
url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
maxZoom= {20}
/>
</BaseLayer>
</LayersControl>
</MapContainer>
</div>
);
}
export default App;
Satellite View
Thank you very much

The tile url you are using for Google maps does not exist:
https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}
From the Leaflet docs:
{s} means one of the available subdomains (used sequentially to help
with browser parallel requests per domain limitation; subdomain values
are specified in options; a, b or c by default, can be omitted), {z} —
zoom level, {x} and {y} — tile coordinates. {r} can be used to add
"#2x" to the URL to load retina tiles.
The urls you are requesting are using the default subdomains a, b and c which all appear broken:
https://a.google.com/vt/lyrs=s&x=1&y=1&z=1
https://b.google.com/vt/lyrs=s&x=1&y=1&z=1
https://c.google.com/vt/lyrs=s&x=1&y=1&z=1
It looks like the correct subdomains are mt1, mt2 and mt3. You can specify them using the subdomains prop:
<TileLayer
url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
maxZoom= {20}
subdomains={['mt1','mt2','mt3']}
/>
https://mt1.google.com/vt/lyrs=s&x=1&y=1&z=1

Sveltestrap Tooltip generates ReferenceError: process not defined (in createPopper.js)

I'm trying to use Tooltip with Svelte and SvelteStrap and need a hand :)
Minimal working example is:
<script>
import {
Button,
Tooltip,
} from 'sveltestrap';
</script>
<Button id="btntest">test</Button>
<Tooltip target="btntest" placement="top" />
After hovering the button, it shows a tooltip (not exactly properly aligned) and immediatelly throws an error:
Uncaught (in promise) ReferenceError: process is not defined
at Object.setOptions (createPopper.js:80)
at createPopper (createPopper.js:214)
at Object.$$self.$$.update (Tooltip.svelte:29)
at update (index.mjs:760)
at flush (index.mjs:732)
Package.json:
"devDependencies": {
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.37.0"
},
"dependencies": {
"sirv-cli": "^1.0.0",
"sveltestrap": "^3.14.0"
}
What shall I do to make this work? :)

It seems there was an issue in Sveltestrap itself. Reported and solved here:
GitHub issue
Now this works as intended.

Failed to load 'sap/ui/table/TreeTable.js'

I'm trying to create a tree structure view from a json model using SAPUI5.
I haven't found solutions on the internet so this is why I'm asking here.
Basically, despite having used the right code over and over again, It fails to load the TreeTable.js file, I have tried using multiple codes but no luck.
I am loading the TreeTable on a Dialog. This is the code:
<core:FragmentDefinition
xmlns="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
xmlns:u="sap.ui.unified"
xmlns:core="sap.ui.core">
<m:Dialog horizontalScrolling="true" showHeader="true" state="None" stretch="false" title="{Soluzione}" type="Standard" verticalScrolling="true" contentWidth="90%">
<m:content>
<TreeTable
id="Tree"
rows="{path: 'applicationModel>/AlberoSoluzioni'}"
selectionMode="MultiToggle"
enableSelectAll="false"
ariaLabelledBy="title">
</TreeTable>
</m:content>
<customHeader/>
<endButton/>
<subHeader/>
</m:Dialog>
</core:FragmentDefinition>
Wondering what I'm doing wrong.
Error in console at loading:
Uncaught Error: failed to load 'sap/ui/table/TreeTable.js' from resources/sap/ui/table/TreeTable.js: 404 - Not Found

You need to add its dependencies in the manifest.json please check if you did so.
"sap.ui5": {
"dependencies": {
"libs": {
"sap.ui.table": {}
}
}
Also, check src in the bootstrap script in index.html

Why is Prop not applied to component in component library vue js?

I am busy moving my components from our projects into a component library for ease of use and maintainability purposes.
I am using this Vue/Nuxt Library template following the structure and processes outlined.
Currently I only have 2 components in there a TestButton.vue and a LoaderModal.vue .
The test button works fine when imported/called from an application when it sits in the library as it shows as expected and looks like it should as it is actually a mdb button (which I just used to test component imports). (we use MDB as our main component lib
The problem is with the Loading Modal. Normally you would set the show property of the modal to show or hide it like so.
<template>
<mdb-modal centered :show="showLoader">
<mdb-modal-body class="text-center">
<div class="d-flex justify-content-center" v-if="selectedLoader==='BALL'">
<div class="spinner-grow" role="status" style="color: #005250; width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<h3 class="block" style="margin-top:16px" v-if="longLoadingText!=null">{{ longLoadingText }}</h3>
<h3 class="block" style="margin-top:16px" v-else>{{ text }}</h3>
</mdb-modal-body>
</mdb-modal>
</template>
using props to show,hide and control text like so
props: {
showLoader: { default: true, type: Boolean },
text: { default: "Loading", type: String },
},
and it works fine if I run it in the component library itself using
vue serve ./src/components/LoaderModal
but when I set the showLoader prop to true from the application that imports the library it does not show. I can see the modal is in the DOM but the display is set to none.
There are no errors in the console and if I change the Display to "block" the LoadingModal Shows.
Here is the html copied from the DOM that shows it is there, but display is just set to "none"
<div data-v-bfb6b926="" data-v-6a672d6c="" class="modal" style="opacity: 1;">
<div data-v-bfb6b926="" role="document" class="modal-dialog modal-dialog-centered" style="transform: translate(0px, 0px);">
<div data-v-bfb6b926="" class="modal-content">
<div data-v-c35b1502="" data-v-6a672d6c="" class="text-center modal-body">
<div data-v-6a672d6c="" data-v-c35b1502="" class="d-flex justify-content-center">
<div data-v-6a672d6c="" data-v-c35b1502="" role="status" class="spinner-grow" style="color: rgb(0, 82, 80); width: 3rem; height: 3rem;"><span data-v-6a672d6c="" data-v-c35b1502="" class="sr-only">Loading...</span></div>
</div>
<!---->
<!---->
<h3 data-v-6a672d6c="" data-v-c35b1502="" class="block" style="margin-top: 16px;">Loading some stuff</h3>
</div>
</div>
</div>
</div>
My Library Package.json looks as follow
{
"name": "#myScope/web-commons",
"version": "0.1.23",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report --target lib --name web-commons ./src/index.js",
"lint": "vue-cli-service lint",
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
},
"main": "dist/web-commons.common.js",
"files": [
"src",
"assets",https://stackoverflow.com/posts/63504989/edit#
"dist/*.{js,css}"
],
"dependencies": {
"mdbvue": "^6.7.1",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/babel-preset-app": "^4.4.6",
"#vue/cli-plugin-babel": "^4.4.6",
"#vue/cli-plugin-eslint": "^4.4.6",
"#vue/cli-service": "^4.4.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.3.1",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"vuepress": "^1.5.2"
}
}
and the plugin looks as follows in my main project.
import Vue from 'vue'
import * as componets from '#myScope/web-commons'
Vue.use(componets)
Then it is also added to the nuxt.config as a plugin.
Please help
EDIT
Below is the value of the props from the vue dev panel
Update
The following is the link to the codesandbox project for the component library. The library is also on Npm. Try using the LoaderModal Component in any nuxt project to see problem.
Code Sandbox Component Library
Component Implementation Example Nuxt js

I see your codesandbox. There is a small mistake using the props in your code for LoaderModal component. If you use a value directly for the props you don't need to bind (:text) it. So you can use the component as below.
<LoaderModal :showLoader="true" text="Some Loading Text"/>
if you use a data element as a props then bind it:
<LoaderModal :showLoader="true" :text="variableName"/>
Here is the working demo of your codesandbox

The actual problem seem to have been that all the required css components of the mdblibrary was not being import despite being imported in the index of the component library.
It seems that when adding a plugin to nuxt it calls the install method and nothing else. The solution was to import the css into the component itself and making it "scoped" otherwise it will affect the components in the main application.
<style
scoped
>
#import "../../node_modules/mdbvue/lib/css/mdb.min.css";
</style>