Vue.js 2 Web Development Projects

Displaying markers

Still in the BlogMap component, we will use the googlemaps-marker again to loop through the posts and display a marker for each of them. Map the posts and currentPost getters, plus the selectPost action, on the right helper and add the markers loop inside the googlemaps-map component:

<googlemaps-marker  v-for="post of posts"  :key="post._id"  :label="{    color: post === currentPost ? 'white' : 'black',    fontFamily: 'Material Icons',    fontSize: '20px',    text: 'face',  }"  :position="post.position"  :z-index="5"  @click="selectPost(post._id)"/>

You can now refresh the app and see the posts you added earlier appear on the map! If you click on a post marker, its icon should turn white too.