Zoom in vue2-google-maps not honored on page load

Question

The zoom functionality for my map does not stay at 15 when entering a new location.

I have a search bar on one page that will then show a map of that location on a different page. The :zoom=15 does not seem to be honored when the page loads. I can manually change the zoom in my code, update the page, and see the correct zoom. But I would like the page to load with :zoom=15.

See code below:

<template>
  <div>
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom=15
      class="my-map"
      id="myMap"
      ref="myMap"
      style="height:500px;width:500px;"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in locations"
        :position="m"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>
<script>
import { gmapApi } from "vue2-google-maps"
export default {
  name: 'FindDefault',
  data () {
    return {
      map: null,
      locations: []
    }
  },
  computed: {
    google: gmapApi
  },
  mounted () {
    this.$refs.myMap.$mapPromise
      .then(map => {
        this.map = map
        const selection = this.$store.state.geoModule.mapSearchSelection
        this.filterCoords(selection)
        this.setBounds()
      })
      .catch(err => {
        throw err
      })
  },
  methods: {
    filterCoords (selection) {
      this.locations.push(selection.geometry.location)
    },
    setBounds () {
      let bounds = new this.google.maps.LatLngBounds()
      this.locations.forEach(loc => {
        bounds.extend(loc)
      })
      this.$nextTick().then(() => {
        this.$refs.myMap.fitBounds(bounds)
      })
      this.$refs.myMap.panToBounds(bounds)
    }
  }
}
</script>

Answer 1

The issue is :zoom=15, if you are assigning the value directly to any property then you should just put it as :zoom="15"

Or if you would like to change the zoom level during runtime declare a property in your data object and use it as :zoom="zoomLevel"

data () {
    return {
      map: null,
      locations: [],
      zoomLevel: 15
    }
  },

Answer 2

What version of vue2-google-maps are you using? There was an isue with the zoom level reported as recently as 12/2018: https://github.com/xkjyeah/vue-google-maps/issues/561

Make sure your version is > 0.10.x