How to create a store locator app using Vue.js, Cosmic, and Google Maps

Community Articles
Community Articles How to create a store locator app using Vue.js, Cosmic, and Google Maps


Source code (github)
Cosmic backend funcion
Google maps javascript API
Vue js and vuex


This little application can be used to allow users to search, and locate your stores. If stores are not relevant to your business, you can it to locate your offices, branches, warehouses… or whatever your business is into. To make this work you need to define a list of your locations that the user can find and locate.

The backend

Using Cosmic can saves you a lot of time, because it will allow you to store your data, and also have a REST api ready without any extra coding. For the purpose of this app I used the following features of Cosmic:

  • Bucket Objects: to store data on the backend like cities, states, where the stores are available.
  • Bucket Media: to store application images and Google maps icons. This is very convenient to have data and media stored in one place.
  • Web Hosting: to host my application I used Cosmic, however you can also use Cosmic to deploy your app into other hosting services.

Cosmic dashboard — adding cities where your store is available

Starting your vue application

After installing vue-cli you can run the following commands to start building your application

$ npm install -g vue-cli
$ vue init webpack store-locator
$ cd store-locator
$ npm install
$ npm install --save vuex vuetify vue-router vue-resource vue-googlemaps cosmicjs moment
$ npm run dev

The vue application will have two major components:

  • SearchPanel.vue : allow the user to select a city, and get a list of stores
  • MapPanel.vue: display the coresponding map with a marker for each store

You can easily build the application layout with vuetifygrid system without the need to write a lot of css.

Adding state management with Vuex and Cosmic

We need to call Cosmic rest api when the application is created to fetch cities which will be used in the search. So in the code below two things are worth mentioning. First we are initializong VueGoogleMaps component with the GOOGLE_API_KEYwhich is provided from google api console. Second we are calling this.$store.dispatch('fetchCities')to populate the availableLocations on the vuex store file. We can also call this.$store.dispatch('fetchStoreCardImages')that will call Cosmic REST api to fetch all images stored within the Media folders.

This is the code to call to configure Cosmic REST API. You can get the Api read, and write keys after you sign up, and add your Bucket.

The Bucket is the root container for all data, files, images for your app.

In the code below as you can see in the fetchCities action we call Cosmic api to select all objects of type cities and loop through the result array and create another object to populat the store availableLocations variable which in turn will be used in the SearchPanel component to display a list of available locations.

Also in very similar way we can call Cosmic REST Api to fetch images and store them in Vuex store using Cosmic.getMedia(...)

Adding Google map to your vue application

To display a map, I have used vue-googlemaps component, which is an easy to use Vue component that acts like a wrapper around Google Maps Javascript API. In order to draw a map, you need to provide the mapCenter point which is a geocode of a specific location. For instance Orlando center downtown have the following geopoint {latitude: 30.325974,longitude: -81.660454}. Also to draw a marker on the map that represents a store or a special location, you need a geopoint, a title, and an icon. For the purpose of this application I stored the geolocation of different cities, and stores in Cosmic backend.

You may be asking how do I get the geolocations for my home address or work office. There several services that can convert a regular address to a geolocation, and vice versa. But the easiest way, is to open Google maps, and click on any point on the map. Then you will see down the bottom a geopoint of that location.

Google maps showing a geolocation of selected point

Here is the code to draw a map when the application starts

In the MapPanel vue component we are using vue-googlemaps to display Google map. All we have to provide is mapCenter, zoom, mapMarkers. We have a couple watchers to update the map. First is the selectedLocation which is triggered whenever the user selects new city from the SearchPanel. We are also watching for stores to populate the map with the markers, which display a little icon for each store within that location. We are also watching for selectedStoreto make the corresponding map marker highlighted. This is how we update the map view

And lastly we just need to add a couple events on map. The first event onMapMarkerClick to make the marker icon highlighted, and also make the corresponding store selected on the search pane. onMapMarkerMouseOverto add a little animation to make the icon jump up and down.

Build and deploy

After you build your application and testing it, you need to add .env file to you root folder to have you application configuration, which look like something like this.


You also need to add start command to package.json script, which will be used by Cosmic hosting to start your application server. Once you update your Api keys, you can just build and deploy to Cosmic using the following commands

$ # to run you app on dev mode
$ npm run dev
$ # to test your production server mode
$ npm run start
$ # to build your application before deployment
$ npm run build
$ # commit all changes to github
$ git add .
$ git commit -m 'Before deployment'
$ git push

Now you can just go to Cosmic web hosting, and follow the instructions to deploy your application.


Adding Google maps to your application is fun and easy way to enhance user experience. Using Vue.js for this application was also big time saver. However with Cosmic I was able to have full stack application with server Rest Api with no additional coding. I think Cosmic is an owesome cloud platform, that can boost your development without extra coding.

I would love to hear from you

Lastly, I encourage you to go through the source code, try the application and let me know if you have any questions or comments below.

Keep creating awesome apps.


You may also like

Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other.
An Object in Cosmic can be a page, a blog post, an author or anything you want it to be. Cosmic gives you the freedom to create and manage content openly and create your own data structure. Each Object allows for the creation of a title, slug, content and Metafields.
Video: Build a Cosmic-powered blog using Gatsby
Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we'll quickstart a Bootstrap Landing Page using the Cosmic CLI. This single page website landing page is built using Node.js and a minimal theme from Start Bootstrap.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic. Users can upload and play tracks, upload and manage album art plus leave comments.
Todo List app built using Svelte that utilizes the power of Cosmic.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales