examples/test-map-center.html

<head>
  <style>
  .map-container {
    width: 400px;
    height: 400px;
  }
  </style>
</head>
<body>
  <script>
  var tests = [];

  </script>

  <div id="test1">
    <h2>Test 1</h2>
    Passes if: You can pan around this map without it being snapped back to the center
    <google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12"
      class="map-container">
    </google-map>
  </div>
  <script>
    tests.push(() => {
      new Vue({
        el: '#test1',
      });
    });
  </script>

  <div id="test2">
    <h2>Test 2</h2>
    Passes if: Clicking the button changes the center
    <button @click="changeCenter">Change Center</button>
    <button @click="changeZoom">Change Zoom</button>
    <google-map :center="changingCenter" :zoom="changingZoom" class="map-container">
    </google-map>
  </div>

  <script>
    tests.push(() => {
      new Vue({
        el: '#test2',
        data: {
          changingZoom: 12,
          changingCenter: {lat: 1.38, lng: 103.8},
        },
        methods: {
          changeCenter() {
            this.changingCenter = {
              lat: 1.38 + Math.random() * 0.3,
              lng: 103.8 + Math.random() * 0.1
            };
          },
          changeZoom() {
            this.changingZoom = Math.floor(5 + Math.random() * 10);
          },
        }
      });
    });
  </script>

  <div id="test3">
    <h2>Test 3</h2>
    Passes if: Resize of (1) is artefact-free. Resize of (2) preserves the center
    <button @click="changeSize">Change Size</button>
    <br/>
    (1):
    <google-map :center="{lat:1.38, lng:103.8}" :zoom="12" ref="resizeMap1"
     :style="changingSize">
    </google-map>
    (2):
    <google-map :center="{lat:1.38, lng:103.8}" :zoom="12" ref="resizeMap2"
     :style="changingSize">
    </google-map>
  </div>
  <script>
    tests.push(() => new Vue({
      el: '#test3',
      data: {
        changingWidth: 200,
        changingHeight: 200,
        i: 0,
      },
      computed: {
        changingSize() {
          return {
            width: this.changingWidth + 'px',
            height: this.changingHeight + 'px',
          };
        }
      },
      methods: {
        changeCenter() {
          this.changingCenter = {
            lat: 1.38 + Math.random() * 0.3,
            lng: 103.8 + Math.random() * 0.1
          };
        },
        changeZoom() {
          this.changingZoom = Math.floor(5 + Math.random() * 10);
        },
        changeSize() {
          this.i = (this.i + 1) % 2;
          this.changingWidth = 200 + this.i * 300;
          this.changingHeight = 200 + Math.random() * 150;
          this.$nextTick(() => {
            this.$refs.resizeMap1.resize();
            this.$refs.resizeMap2.resizePreserveCenter();
          });
        }
      }
    }));
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>
  <script src="vue-google-maps.js"></script>

  <script>
    Vue.use(VueGoogleMaps, {
      load: {
        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
      }
    });

    document.addEventListener('DOMContentLoaded', function() {
      Vue.component('google-map', VueGoogleMaps.Map);

      for (let test of tests) {
        test();
      }
    });
  </script>

</body>