Load markers in viewport

[oalkhanishvili]

i checked in production demo there is shown map where markers are loaded after changing of map view. markers that are already loaded are cached and do not rendered again.

when i load new markers like i checked first all markers are deleted and then re-rendered it gives me some flash also opened infowindows are closed automatically. do you have any solutions?

[GuillaumeLeclerc]

It seems strange can you give me the steps to reproduce ?

[oalkhanishvili]

<cluster
                        :grid-size="20"
                        :styles="cluster_styles"
                        :max-zoom="13"
                >
                  <marker
                        v-for="m in markers"
                        track-by="id"
                        :position.sync="m.position"
                        :icon.sync="icons[m.status]"
                        @g-click="openWindow($index)"
                >
                    <info-window :opened.sync="m.isOpen"
                    >
                            .....
                    </info-window>
                </marker>
                </cluster>

To get markers from service and put it in markers Array i use

this.$http.get(base_url.origin + '/api/markers', data)
        .then((resp) => {
          this.markers = resp.data.filter((x) => x.status < 3)
                .map((x) => {
                    if (x.gallery.length > 0) {
                        return {
                            id: x.id,
                            position: {
                                lat: x.lat,
                                lng: x.long
                            },
                            zindex: 0,
                            isOpen: false,
                            isFavorited: !!x.favorite,
                            workType: x.work_type,
                            category: x.category_id,
                            categoryName: x.category_name,
                            status: x.status,
                            address: x.street_name,
                            gallery: x.gallery,
                            poster: (x.gallery.length > 0) ? ((x.gallery.length > 1 ) ? x.gallery[1].image : x.gallery[0].image) : '',
                            avatar: (x.gallery.length > 0) ? ((x.gallery.length > 1 ) ? x.gallery[1].avatar : x.gallery[0].avatar) : '',
                            fullname: (x.gallery.length > 0) ? ((x.gallery.length > 1 ) ? x.gallery[1].fullname : x.gallery[0].fullname) : '',
                            description: (x.gallery.length > 0) ? ((x.gallery.length > 1 ) ? x.gallery[1].description : x.gallery[0].description) : '',
                            added_on: (x.gallery.length > 0) ? ((x.gallery.length > 1 ) ? x.gallery[1].added_on : x.gallery[0].added_on) : '',
                        });
                    }
                };
                setTimeout(() => {
                    this.loader = false;
                }, 1500);

        }, (error) => console.error(error));

[GuillaumeLeclerc]

I'm not sure If I understand you problem. Can you tell me what you expect and what you get ?

If it is reproducible on the vue-google-maps-example repository. Can you explain the steps to reproduce ?