Vue 3 createWidgetMixin giving Cannot read properties of null (reading 'items')

[Raquel Mercado]

Bug 🐞

What is the current behavior?

I'm trying to integrate googlemaps in vue instant search and I was following the tutorial : https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/geo-search/vue/?client=javascript

I just modified the import { createWidgetMixin } from 'vue-instantsearch'; with import { createWidgetMixin } from 'vue-instantsearch/vue3/es';

I also changed the main component from import VueGoogleMaps from 'vue-googlemaps'; to import VueGoogleMaps from '@fawmi/vue-google-maps'` for vue3 compatibility.

And I got error with createWidgetMixin because state is null so I can't print the markers on the map.

this is my code:

<template>
  <GMapMap
      :center="center"
      :zoom="12"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapCluster
      v-if="state"
      :styles="[
          {
            textColor: 'white', top:'40%', 
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m3.png',
            height: 65,
            width: 66,
          }
        ]">
      <GMapMarker
           v-for="item of state.items"
          :key="item.objectID"
          :title="item.name"
          :position="item._geoloc"
      />
    </GMapCluster>
  </GMapMap>
</template>
<script>
import { createWidgetMixin }  from 'vue-instantsearch/vue3/es';
import { connectGeoSearch } from 'instantsearch.js/es/connectors';

export default {
  mixins: [createWidgetMixin({ connector: connectGeoSearch })],
  name: 'Map',
  setup() {
    return {
      center: {lat: 19.499640282166837, lng: -99.07581397794573},
    }
  }
}
</script>

What is the expected behavior?

I'm expecting to have the state objects with all my items from algolia data

Does this happen only in specific situations?

Only with Vue3 and @fawmi/vue-google-maps

What is the version you are using?

Vue3 and VueInstantSearch 4.1.1

[Haroen Viaene]

You need to wrap the rendering in v-if="state", as that starts out being null. What I think is possible is that the vue-google-maps does some special logic to do render the children, even if itself doesn't render. To help more efficiently, we'd need to see this code reproduced in a sandbox. We have a template available for that purpose here. Thanks!

[Raquel Mercado]

Thanks for your reply.
I tried to do the Sandbox with your indexes and converting it at Vue3 and it worked very well (you can see it there )
But when I put my indices I don't have any marker on the map ...

So I printed directly in the view the items <pre>{{ state.items }}</pre> and I got an empty array ...

So maybe something is wrong with my Algolia settings, because in my hits, I have all my results ?

[Raquel Mercado]

I found where my problem was ... I didn't get the _geoloc property in my Algolia datas ... I didn't see that without the property it don't work...