https://github.com/pburdette/vue-store-locator
Example for building a custom google map store locator with Vue
https://github.com/pburdette/vue-store-locator
google-maps google-maps-api store-locator vue vuejs
Last synced: 10 months ago
JSON representation
Example for building a custom google map store locator with Vue
- Host: GitHub
- URL: https://github.com/pburdette/vue-store-locator
- Owner: pburdette
- Created: 2018-07-05T15:38:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-05T18:46:29.000Z (almost 8 years ago)
- Last Synced: 2025-04-05T05:11:36.338Z (about 1 year ago)
- Topics: google-maps, google-maps-api, store-locator, vue, vuejs
- Language: JavaScript
- Size: 118 KB
- Stars: 18
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-store-locator
## Description
This repo is an example of how to build a store locator in Vue. It utilizes [vue-google-maps](https://github.com/xkjyeah/vue-google-maps) and the [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference/3/). 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.
## Features
* 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
## Running
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: ''
})
```
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
```