{"id":24229681,"url":"https://github.com/pburdette/vue-store-locator","last_synced_at":"2025-08-20T22:18:24.822Z","repository":{"id":74066035,"uuid":"139869675","full_name":"pburdette/vue-store-locator","owner":"pburdette","description":"Example for building a custom google map store locator with Vue","archived":false,"fork":false,"pushed_at":"2018-07-05T18:46:29.000Z","size":121,"stargazers_count":18,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T05:11:36.338Z","etag":null,"topics":["google-maps","google-maps-api","store-locator","vue","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pburdette.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-05T15:38:36.000Z","updated_at":"2024-12-10T23:10:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"6e6da1a0-bbd6-47f5-98e9-78bc71d3c4be","html_url":"https://github.com/pburdette/vue-store-locator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pburdette/vue-store-locator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pburdette%2Fvue-store-locator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pburdette%2Fvue-store-locator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pburdette%2Fvue-store-locator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pburdette%2Fvue-store-locator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pburdette","download_url":"https://codeload.github.com/pburdette/vue-store-locator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pburdette%2Fvue-store-locator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261237812,"owners_count":23128844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","google-maps-api","store-locator","vue","vuejs"],"created_at":"2025-01-14T12:39:29.948Z","updated_at":"2025-08-20T22:18:24.816Z","avatar_url":"https://github.com/pburdette.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-store-locator\n\n![store-locator-demo](https://user-images.githubusercontent.com/20526900/42333494-df0910b8-8048-11e8-898f-2ba9a4d08d03.gif)\n\n## Description\n\nThis 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.\n\n## Features\n\n* Display locations on a map\n* Display store information in sidebar\n* Search for locations inside a user supplied radius\n  * Store list and map share same data, so the store list will update when the markers on the map update\n* Get directions from current location\n* Display distance from location in miles and sort \n\n\n## Running\nThe API key is hidden for obvious reasons. You will need to create ```config/dev.env.js``` and put your own API key in.\n```\n'use strict'\nconst merge = require('webpack-merge')\nconst prodEnv = require('./prod.env')\n\nmodule.exports = merge(prodEnv, {\n  NODE_ENV: '\"development\"',\n  API_KEY: ''\n})\n\n```\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpburdette%2Fvue-store-locator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpburdette%2Fvue-store-locator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpburdette%2Fvue-store-locator/lists"}