AlgoliaError

gistfile1.md

<template>
    <div v-if="state" class="ais-GeoSearch">
        <GmapMap
            :center="center"
            :zoom.sync="zoom"
            class="ais-GeoSearch-map"
        >
        <gmap-custom-marker
                class="cursor-pointer px-2 py-2 bg-green-500 shadow-lg rounded-full transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border border-white"
                v-for="(item, i) in state.items"
                :class="bgClass(i)"
                :key="i"
                :title="item.listing_name"
                @click.native.stop="toggleInfoWindow(item, i)"
                :marker="item._geoloc"
                :zIndex="0"
            > 
                <div class="font-semibold text-green-500 text-md">
                    <!-- ${{ item.price }} fgdgfdgdf -->
                </div>
        </gmap-custom-marker>


                    <gmap-info-window v-if="infoWinOpen" :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false" >
                       <CardListing
                    :property="infoContent"
                    :key="infoContent.id"
                >
                </CardListing>
            </gmap-info-window>

            <!-- <InfoWindow v-if="infoWinOpen" :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false" >
      
            </InfoWindow> -->
                    <!-- :auth="auth" -->
        </GmapMap>
    </div>
</template>

<script>
    // import ListingSummary from '../dashboard/FavoriteRooms/ListingSummary.vue';
    // import * as GmapVue from '~/node_modules/gmap-vue';
    import { createWidgetMixin } from 'vue-instantsearch';
    import { connectGeoSearch } from 'instantsearch.js/es/connectors';
    import GmapCustomMarker from 'vue2-gmap-custom-marker';

    export default {
        components: {
            // ListingSummary,
            'gmap-custom-marker': GmapCustomMarker
        },
        // props: ['auth'],
        mixins: [createWidgetMixin({ connector: connectGeoSearch })],
        created() {
            console.log(this.infoContent);
        },
        data() {
            return {
                zoom: 13,
                infoContent: [],
                infoWindowPos: {lat:0,lng:0},
                infoWinOpen: false,
                currentMidx: null,
                infoOptions:{pixelOffset: {width: 0, height: -35}},
            };
        },
        methods: {
            toggleInfoWindow: function (item, idx){
                this.infoWindowPos = item._geoloc;
                this.infoContent = item;
                if(this.currentMidx === idx)
                {
                    this.infoWinOpen = !this.infoWinOpen;
                }
                //if different marker set infoWindow to open and reset current marker index
                else
                {
                    this.infoWinOpen = true;
                    this.currentMidx = idx;
                }
            },
            // change Marker color when selected
            bgClass (i) {
                return {
                    'bg-gray-800 z-60': i === this.currentMidx
                }
            }
        },
        computed: {
            center() {
                // return { lat: 18.457124 , lng: -66.074178  };
                // if no rooms found set to specific location otherwise show first rooms search result lat & lng
                return this.state.items.length !== 0
                    ? this.state.items[0]._geoloc
                    : { lat: 18.457124 , lng: -66.074178  };
            },
        },
        mounted() {
            console.log(this.state);
        }
    };
</script>



<style scoped>
    .ais-GeoSearch {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .ais-GeoSearch-map {
        flex: 100% 1 1;
    }
    .z-60 {
         z-index: 60 !important;
    }
</style>