zeeshanalam39/pinia-restaurants

An example app using Vue 3, Pinia, and the Google Maps API

Pinia-Restaurants

An example project using Vue 3's Composition API, Pinia, and Google Maps API

Get it Working

To see this project working, you can clone the project and then do the following.

Install dependencies

npm install

Create .env file

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

Create a Google Maps Platform Account

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

Give your browser permission to use geolocation data

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.

Questions

If you have any questions, you can reach out to me on twitter