GMapComponent.vue

<template>
  <div class="main-map"></div>
</template>

<script lang="ts">
  import {Watch, Component, Vue, Prop} from 'annotation';

  @Component
  export default class GMapComponent extends Vue {

    @Prop({default: 0})
    public lat: number;

    @Prop({default: 0})
    public lng: number;

    @Watch('latLng')
    public onLatLngChange(param: any) {
      const {lat, lng} = param;
      if (this.marker && typeof lat === 'number' && typeof lng === 'number') {
        const latlng: any = new (window as any).google.maps.LatLng(lat, lng);

        this.marker.setPosition(latlng);
        this.map.setCenter(latlng);
      }
    }

    public get latLng() {
      return {lat: this.lat, lng: this.lng};
    }

    public map: any = null;

    public marker: any = null;

    public mounted() {
      if ((window as any).google && (window as any).google.maps) {
        this.initMap();
      }
    }

    public initMap() {
      let myLatLng = {lat: this.lat, lng: this.lng};

      this.map = new (window as any).google.maps.Map(this.$el, {zoom: 15, center: myLatLng});
      this.marker = new (window as any).google.maps.Marker({position: myLatLng, map: this.map});
    }
  }
</script>

<style scoped>
  .main-map {
    height: 500px;
    width: 100%;
  }
</style>