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

How do I display images from Google Drive on a react front-end website?

I want to upload some photos in my Google Drive and would like me to display those photos. I'm actually using React.js right now and I'm really new to programming. I just wanna display the photos and have the specific date related to the photos. I'm searching on google and youtube and I still have no clear answers.

Try the following:
1) Obtain the public link of your uploaded google drive image:
my case: https://drive.google.com/file/d/1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-/view?usp=sharing
2) Extract the id from the link:
my case: 1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-
3) Use the following url structure in react:
<img src="https://drive.google.com/uc?export=view&id=INSERT_HERE_YOUR_GOOGLE_DRIVE_IMAGE_ID" alt="drive image"/>
4) Result:
<img src="https://drive.google.com/uc?export=view&id=1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-" alt="drive image"/>
For further doubts watch this video: https://www.youtube.com/watch?v=iajv8y-6n3Q that I made.

First of all, Go to your Google Drive and Share the link of photos in a public mode.
Then copy the id of your photos link.
Replace the ID's of your photo urls => https://drive.google.com/thumbnail?id='your photo link id'
Then Copy the Above by replacing ID and Paste it in Img Src of React Js App.
Then Run React Js App
import React from 'react';
function App() {
return(
<div>
<img src="https://drive.google.com/thumbnail?id='your photo link id'" alt="image" />
</div>
);
}
export default App;
If Img tag don't work, try to use this
<img src={require('https://drive.google.com/thumbnail?id='your photo link id').default} />
I Hope it works. Note my export view thumnail size, you can change the size according to your style requirement.

How I can make a static map with google-map-react in react?

I have this :
<GoogleMapReact
bootstrapURLKeys={{ key: 'key' }}
defaultCenter={center}
defaultZoom={zoom}
>
<TacoMarker
link={shop.id}
lat={latitude}
lng={longitude}
/>
</GoogleMapReact>
What props can I pass you? Would it be like a scrollEnabled = {false}?

google-map-react is written to use Maps JavaScript API. Please note that Maps JavaScript API is different from Maps Static API. If you would like to show a static map in your react code, you can just directly put the Maps Static API URL in the src parameter of your <img/> tag.
Here's a sample code snippet:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div>
<h1>Static Maps Sample</h1>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY"/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

Put a label inside each l-geojson component with Vue Leaflet

I need to place a Label inside each Polygon in a map. These polygons are generated by a v-for and I wish I could set a <l-tooltip> inside these <l-geojson> components but it just doesn't work.
<LeafletMap v-if="location"
class="map"
:canEdit="canEditMap"
:zoom="13"
:center="coordinates"
:geoFences="geoFences">
<div v-for="(fence, index) in geoFences" :key="index"
v-show="!canEditMap">
<l-geojson
:geojson="fence.geo_json"
color="green">
</l-geojson>
</div>
</LeafletMap>
Is there any other way to do it?

Can you have more than one SVG on a page? (using svg-react-loader)

I'm trying to import and display multiple SVGs in the same component, but it's actually just showing the first one duplicated every time, instead of two individual SVGs. Here is my code:
import React, { Component } from 'react';
import Account from '-!svg-react-loader!./svg/Account.svg';
import Alert from '-!svg-react-loader!./svg/Alert.svg';
<div className="col-lg-1">
<Account className="icon" />
</div>
<div className="col-lg-1">
<Alert className="icon" />
</div>
Can we only have one instance of an SVG per page?

For anyone reading this. It appears Sketch was saving the SVGs out with the same id - "#path-1", which was breaking when there were multiple on the page. So, the answer is they need a unique ID.