This repo is an example of how to build a store locator in Vue. It utilizes vue-google-maps and the Google Maps API. Before building this I searched for a good example and was unsuccessful in finding one. So I decided to build one and share the code for others in the same situation as I was. All code is written on the client-side, so no need for a backend to process radius etc. I've brought in static data for the sake of this repo, but in production you most likely will be making an API call to a endpoint.
- Display locations on a map
- Display store information in sidebar
- Search for locations inside a user supplied radius
- Store list and map share same data, so the store list will update when the markers on the map update
- Get directions from current location
- Display distance from location in miles and sort
The API key is hidden for obvious reasons. You will need to create config/dev.env.js and put your own API key in.
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_KEY: ''
})
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev