Clone Sample won’t work at npm start

sample project: Place Searches | Maps JavaScript API | Google Developers

1
2
3
4

git clone -b sample-place-search https://github.com/googlemaps/js-samples.git  
cd js-samples  
npm i  
npm start

A message like this kept showing up. If you clicked in docs, it only gave you useless instructions that won’t work even if you tried million times.

How to solve it?

First, go to See the Maps JavaScript API and Get an API Key.

Make sure you have Maps API Key and empty the others to troubleshoot.

Somehow npm run build / vite build don’t use .env to update your API key in index.html.

And, don’t forget to protect you key like mine here:

Resources:

Google Maps JavaScript API RefererNotAllowedMapError — Stack Overflow

Google Maps Javascript API Error “RefererNotAllowedMapError” — GravityKit Support, Knowledge Base, How-To & Docs

How to use GitHub Actions secrets to hide your tokens and passwords example

What if I want to use API key in build/Productionby creating .env file.

My example: (add a workflow to manually overwrite or create one .env)

Set up your API key by Github Actions Secrets

Resources:

Create .env file · Actions · GitHub Marketplace

environment variables — How do I use an env file with GitHub Actions? — Stack Overflow

How to use GitHub Actions secrets to hide your tokens and passwords example (theserverside.com)

Contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)