How to create a store locator app using Vuejs, Cosmic JS, and Google Maps.

store locator app build using Vue, Cosmic JS, and Google Maps

TL;DR:

Demo

Source code (github)

Cosmic JS 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 JS 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 JS:

• 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 JS, however you can also use Cosmic JS to deploy your app into other hosting services.

Cosmic JS 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 vuetify grid system without the need to write a lot of css.

Adding state management with Vuex and Cosmic JS

We need to call Cosmic JS 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_KEY which 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 JS REST api to fetch all images stored within the Media folders.

This is the code to call to configure Cosmic JS 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 JS 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 JS 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 JS 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 selectedStore to 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. onMapMarkerMouseOver to 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-HERECOSMIC_BUCKET=store-locatorCOSMIC_READ_KEY=PASTE-YOUR-API-KEY-HERECOSMIC_WRITE_KEY=PASTE-YOUR-API-KEY-HEREPORT=5000

You also need to add start command to package.json script, which will be used by Cosmic JS hosting to start your application server. Once you update your Api keys, you can just build and deploy to Cosmic JS 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 JS 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 JS I was able to have full stack application with server Rest Api with no additional coding. I think Cosmic JS 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.