An example project using Vue 3's Composition API, Pinia, and Google Maps API
To see this project working, you can clone the project and then do the following.
npm install
Create a .env file at the root of the project and then go into the .gitignore file and add .env to the list. This will make sure that the .env file does not get pushed up to github if you choose to push the project up to github
You will need to create this account to get the API key to use the Google Maps and Google Places APIs.
Go to https://developers.google.com/maps.
In the left sidebar, click on APIs
Enable billing for the project. You will need to add a credit card. Google will give you $200 of free credits to use. It's recommended that you set up your account so that you receive a notification if you pass a certain amount spent. The $200 goes far, but it's better to be careful.
To create a project, click "Get Started" and then tick "Maps" and "Places" so you can use both those APIs.
Get your API key.
Once you have your API key, add it to the .env file as GOOGLE_MAPS_API=your_api_key
To see the project working correctly, you must give your browser permission to use your location data.
When you first run the project, the browser should give a pop-up window that asks permission to use your location. Be sure to give it this permission.
If you don't see the pop-up, then you'll need to go into the settings of your browser and set it to have permission to use your location.
If you have any questions, you can reach out to me on twitter