Reputation: 51
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
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