Is there a way to display the markers that fall within the specified radius on my map? I need to showcase these locations based on their proximity to a central point, as this will be essential for developing a function that identifies places within a certain kilometer radius.
Take a look at my map:
You'll notice that I have numerous markers on the map, fetched from my database using an Axios request.
Below is a snippet of my code:
data() {
return {
clinics: [],
points: '',
property: {
lat: 1.28237,
lng: 103.783098
},
diameter: 5000
}
},
methods: {
initMap() {
// Center marker within circle
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: this.property
})
const circle = new google.maps.Circle({
map: map,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
radius: this.diameter,
center: this.property
});
const marker = new google.maps.Marker({
position: this.property,
map: map
});
// Other Markers
for (var i = 0; i < this.clinics.data.length; i++) {
var coords = this.clinics.data[i].coord;
var details = this.clinics.data[i].clinic;
var latLng = new google.maps.LatLng(coords['lat'], coords['lng']);
var markers = new google.maps.Marker({
position: latLng,
map: map,
});
const contentString = '<div id="content"><p>' + details + '</p></div>';
// Info window functionality
this.infoWindowShow(markers, contentString);
}
}
}