Marcos Moskorz
Marcos Moskorz

Reputation: 51

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

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>

Upvotes: 0

Views: 6490

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59388

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}
},

Upvotes: 4

Related Questions