vue2-google-maps mark-icon size and use of the google object to resize don't work

Question

I'm using vue2-google-maps and i'm trying change marker-icon size and use the google object to resize, but don't work when i refresh the page.

Here is the problem:

First attempt after save Working fine!

After I refresh the page Doesn't work

I try to emulate the exemple of use google object from the website of vue2-google-maps.

The HTML/Vue

<template>
 <v-content  class="background-light">
   <v-layout row wrap>
    <v-flex xs12 class="mb-4">
     <GmapMap
      :center="{lat: 19.636226, lng: 42.806212}"
      :zoom="5"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
        :icon="m.icon"
        :label="m.label"
      />
      </GmapMap>
    </v-flex>
   </v-layout>
  </v-container>
 </v-content>
</template>

This the script

<script>
import {gmapApi} from 'vue2-google-maps'
export default {
 data: () => ({
  markers: [],
 }),
 created () {
  this.initialize()
 },
 computed: {
  google: gmapApi
 },
 methods: {
  initialize () {
   this.markers = [
     {
      position:
        {
          lat: 19.636226,
          lng: 42.806212
        },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize:  this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    }, 
    {
      position:
      {
        lat: 18.445320,
        lng: 47.989452
      },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    },
    {
      position:
      {
        lat: 19.128580,
        lng: 47.698405
      },
       icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    },
    {
      position:
        {
          lat: 19.881369,
          lng: 43.367863
        },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
     }, 
    ]
   },
  },
 }
</script>

Answer 1

It most likely occurs since by the time when marker icon is getting initialized Google Maps API is not yet loaded which makes icon initialization to fail for the following properties:

icon: {
    scaledSize:  this.google && new google.maps.Size(28, 28),
    labelOrigin: this.google && new google.maps.Point(16,-10),
}

You could consider the following options to circumvent this issue:

Option 1

Utilize $gmapApiPromiseLazy mixin from vue-google-maps to guarantee Google Maps API has been loaded, like this:

created() {
   this.$gmapApiPromiseLazy().then(() => {
      this.initialize();  //init once  library has been loaded
   });
},

Option 2

initialize icon properties via object literals instead of Google API specific objects like this:

icon: {
    url: "https://image.flaticon.com/teams/slug/google.jpg",
    scaledSize: {width: 28, height: 28},
    labelOrigin: {x: 16, y: -10}
},