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

TL;DR:

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


Intro

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.

GOOGLE_API_KEY=PASTE-YOUR-API-KEY-HERE
COSMIC_BUCKET=store-locator
COSMIC_READ_KEY=PASTE-YOUR-API-KEY-HERE
COSMIC_WRITE_KEY=PASTE-YOUR-API-KEY-HERE
PORT=5000

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.


Conclusion

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.

Cheers.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Eliminate the language barrier between you and the opinions of your customers
Now editors can use the new Unsplash Photos Extension to find and add stock photography to their media library, all from the comfort of their Bucket Dashboard without having to interface with a third-party website like Unsplash.
We recently released Cosmic Functions (public beta). We're excited to help teams build amazing modern products together with new serverless solutions.
In this tutorial I'll be showing you how I built a Vue.js app with Authentication using Cosmic and AWS Lambda prior to deploying to Netlify. Let's get started.
Blazing fast Blog application using Blazor and Cosmic
For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we're going to build an e-commerce website using Nuxt and Cosmic.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales