Show Google maps on vue component.

store-locator-map-view-1.js

<template>
    <div class="map-panel-container elevation-8 brown lighten-4">
        <googlemaps-map
            ref="map"
            class="map"
            :center.sync="mapCenter"
            :zoom.sync="zoom">

            <googlemaps-marker
                v-for="marker in mapMarkers"
                :key="marker.id"
                :title="marker.title"
                :animation="marker.animation"
                :icon="marker.icon"
                :position="marker.position"
                @click="onMapMarkerClick(marker.id)"
                @mouseover="onMapMarkerMouseOver(marker.id)"
                @mouseout="onMapMarkerMouseOut(marker.id)">
            </googlemaps-marker>

        </googlemaps-map>
    </div>
</template>
<script>
import {mapActions} from 'vuex'
import EventBus from '../eventBus'

export default {
    data () {
        return {
            mapCenter: {lat: 0, lng: 0},
            zoom: 11,
            mapMarkers: null,
            ...
        }
    },
    computed: {
        selectedLocation () {
            return this.$store.getters.selectedLocation
        },
        selectedStore: {
            get () {
                return this.$store.getters.selectedStore
            },
            set (value) {
                this.updateSelectedStore(value)
            }
        },
        stores () {
            return this.$store.getters.stores
        },
        ...
    },
    watch: {
        selectedLocation () {
            this.updateMapCenter(this.selectedLocation)
        },
        selectedStore (newValue, oldValue) {
            this.selectMapMarker(oldValue, false)
            this.selectMapMarker(newValue, true)
        }
    },
    ...
}