Is it possible to search an area based on the position of map?

[TomBell95]

Hey guys - this plugin is a life saver! Does anyone know how to implement search functionality based on the position of the map (i.e. like airbnb)?

If required I can post my code - all the lat/lng's are pulled from an API and I want to make area's searchable on the map for a better user experience.

Thanks!

[kkrell2016]

So you mean, that only the marker in the given area a shown?

-You can filter it serverside. Give the API the bounding box of the map to just show this markers. -Another way would be to get a ref to the map and use the computation functions of the google api. -Or just show the data where lat and lng is between lat&lng of the bounding box.

Will depend on your code.

[srestraj]

Maybe I'm a little late to the party 😁. Considering that your API filters data based on the lat/lng provided, you can achieve this by first firing an event on dragend and calling the getCenter() method to get the lat/lng of the center.

<template>
<GmapMap
        :center="{
          lat: parseFloat(center.lat),
          lng: parseFloat(center.lng),
        }"
        ref="map"
        @dragend="boundsChanged($event)"
        @zoom_changed="boundsChanged($event)"
>...</GmapMap>

</template>
<script>
methods: {
     boundsChanged(e) {
            // get the lat/lng of the center
            console.log(this.$refs.map.$mapObject.getCenter().lat(), this.$refs.map.$mapObject.getCenter().lng())
     }
}
</script>

With this, what I would do is only display the "Search this area" button when the dragend or zoom_changed event is triggered and then use the center's lat/lng to call the API for nearby results.

But it depends on your API too.