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 grid system without the need to write a lot of css. vuetify 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 which is provided from . Second we are calling to populate the on the vuex store file. We can also call that will call Cosmic JS REST api to fetch all images stored within the Media folders. GOOGLE_API_KEY google api console this.$store.dispatch('fetchCities') availableLocations this.$store.dispatch('fetchStoreCardImages') 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 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 variable which in turn will be used in the SearchPanel component to display a list of available locations. fetchCities availableLocations 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 component, which is an easy to use Vue component that acts like a wrapper around . In order to draw a map, you need to provide the point which is a geocode of a specific location. For instance Orlando center downtown have the following geopoint . 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. vue-googlemaps Google Maps Javascript API mapCenter {latitude: 30.325974,longitude: -81.660454} 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 , and click on any point on the map. Then you will see down the bottom a geopoint of that location. Google maps Google maps showing a geolocation of selected point Here is the code to draw a map when the application starts In the vue component we are using to display Google map. All we have to provide is . We have a couple watchers to update the map. First is the which is triggered whenever the user selects new city from the . We are also watching for to populate the map with the markers, which display a little icon for each store within that location. We are also watching for to make the corresponding map marker highlighted. This is how we update the map view MapPanel vue-googlemaps mapCenter, zoom, mapMarkers selectedLocation SearchPanel stores selectedStore And lastly we just need to add a couple events on map. The first event to make the marker icon highlighted, and also make the corresponding store selected on the search pane. to add a little animation to make the icon jump up and down. onMapMarkerClick onMapMarkerMouseOver Build and deploy After you build your application and testing it, you need to add file to you root folder to have you application configuration, which look like something like this. .env 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 command to 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 start package.json $ # 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 , try the application and let me know if you have any questions or comments below. source code Keep creating awesome apps. Cheers.
