Using the googlemaps api key?

[jlemonz]

📚 What are you trying to do?

Hi All,

I am really stuck with this. So i use the demo code

<ScriptGoogleMaps
    ref="googleMapsRef"
    :center="query"
    :markers="markers"
    :api-key="googleMapsApiKey"
    class="group w-full h-64 rounded-lg"
    above-the-fold
    @ready="handleReady"
  />

const googleMapsApiKey = process.env.NUXT_GOOGLE_MAPS_API_KEY;

but this doesnt work? When i use my api key directly in the file it works. But putting it in the .env i wont load the map? I thought placing your api key is not secure? Already asked chatgpt but no solution.

🔍 What have you tried?

I looked at the docs. Nothing about it. I tried chatgpt and different solutions nothing works.

ℹ️ Additional context

No response

[TheAlexLichter]

You should use runtimeConfig

[harlan-zw]

The setup instructions need to be improved for this page. Using .env is supported but you need to follow the format of NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY

// nuxt.config.ts
export default defineNuxtConfig({
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        googleMaps: {
          apiKey: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY
        },
      },
    },
  },
})

# .env
NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY=<your-token>

I'll leave open to track doc update

[jlemonz]

Thank you i got it working. Is using public not a security issue? I read that I can enable on google cloud what site can use the api key. Or is the key hidden in the script?

[TheAlexLichter]

Thank you i got it working. Is using public not a security issue? I read that I can enable on google cloud what site can use the api key. Or is the key hidden in the script?

Google Maps needs a public API key. For other APIs you definitely don't want it public (e.g. the stripe private key). Talked a bit about that in this video

[harlan-zw]

Yes just to add on to this, make sure you lock down your google maps API key to specific hosts!

Very important step https://developers.google.com/maps/api-security-best-practices#restricting-api-keys