In this last part, we are going to add the blog content to the app. Each blog post will have a position and an optional place ID from Google Maps (so the place can be described, for example, as "Restaurant A"). We will load the posts that fit in the visible bounds of the map and each one will appear as a marker with a custom icon. When clicking on a marker, the right side panel will display the post content and a list of comments. Clicking anywhere else on the map will create a draft post at this location in the Vuex store and display a form to write its content and save it in the right side panel.
Let's start by creating a new posts namespaced Vuex module to manage shared data related to the blog posts:
- Create a new
store/posts.jsfile with those state properties:
export default {
namespaced: true,
state () {
return {
// New post being created
draft: null,
// Bounds of the last fetching
// To prevent...