[Vuejs]-Vue2-google-maps mark-icon size and use of the google object to resize don't work

by

4👍

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}
},
👤Vadim Gremyachev

Leave a comment