Vuejs google map show marker/coordinates inside in the center circle

Question

How can I show the markers that are inside my center radius? I need to show the places based on the radius because this will be my basis in making a function in finding such places based on km radius of a place.

Here is my map

As you can see i have many markers. that is coming from my database by calling axios request.

here is my code snippet

     data() {
         return {
            clinics: [],
            points: '',
            property: {
               lat: 1.28237,
               lng: 103.783098
            },
            diameter: 5000
         }
      },
      methods: {
         initMap() {
            //center marker from circle
            const map = new google.maps.Map(document.getElementById('map'), {
               zoom: 13,
               center: this.property
            })
            const circle = new google.maps.Circle({
               map: map,
               trokeColor: '#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>';
               //for Info window function
               this.infoWindowShow(markers, contentString);
            }
         }

Why are you loading **all** the markers if you're only interested in those that fall within the circle? + I already pointed you to a complete answer on how to query your database for markers based on a center point and a radius. Does that not work for you? — MrUpsidown, Apr 24 '20 at 09:58
What doesn't work? *It doesn't work* is not a problem description + your above code doesn't show any attempt at going down that road. Yet it would be a much better solution than the one you accepted. — MrUpsidown, Apr 27 '20 at 08:52

score 0 · Accepted Answer · answered Apr 27 '20 at 06:39

0

You can put a function in your for loop that will check the distance between the center of the circle and the marker's coordinate if it will be less than or equal the radius you set before you plot it. It should look like this.

    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']);

        //Get distance between the center of the circle and the coordinates
    var dist  = google.maps.geometry.spherical.computeDistanceBetween(CenterOfCircle,latLng);    

    //If distance is less than the radius, plot the markers in the map
    if (dist <= radiusOfCircle){
               var markers = new google.maps.Marker({
                  position: latLng,
                  map: map,
               });
               const contentString = '<div id="content"><p>' + details + '</p></div>';
               //for Info window function
               this.infoWindowShow(markers, contentString);
            }
  }

You can use the computeDistanceBetween() of the Geometry library. Make sure to add 'libraries=geometry' in the script that is calling the Google Maps API.

Here is a simple code that is just looping in the set of coordinates and here is a modification of the simple code that is just plotting only the markers inside the circle.

Hope this works with your implementation!

answered Apr 27 '20 at 06:39

Pagemag

2,779
1
7
17

hello sir i modified your code and why i get such `Uncaught TypeError: a.lat is not a function` – Apr 27 '20 at 06:45
1

That error means that you are passing a value that is not a coordinate. It might be that the value you are passing is a string. You need to supply two google.maps.LatLng objects in the function. Have you checked the coordinates you are passing? – Pagemag Apr 27 '20 at 06:52
i used this `var latLng = new google.maps.LatLng(coords['lat'], coords['lng']);` – Apr 27 '20 at 06:56
I can replicate the error in this [fiddle](https://jsfiddle.net/hufk3qtL/3/). It happens when I passed a coordinates that is not declared by "new google.maps.LatLng()". – Pagemag Apr 27 '20 at 06:56
can we continue in chat? it seems i dont have error but i can only see my center marker and circle no markers is shown now. – Apr 27 '20 at 06:58
Are both of your coordinates a google.maps.LatLng objects? Is this the only error you are seeing? – Pagemag Apr 27 '20 at 06:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212595/discussion-between-user001232-and-pagemag). – Apr 27 '20 at 07:00
This will be very bad in terms of performance if OP has many markers (seems to be the case). Instead of doing that on the front-end, it would be much better to do it on the backend and to retrieve only the markers which fall within the circle radius, and **I already pointed OP** (on his [previous question](https://stackoverflow.com/questions/61360228/google-maps-display-markes-based-on-coordinates-from-database-using-vue)) to [a perfectly valid answer](https://stackoverflow.com/questions/21042418/mysql-select-coordinates-within-range) which provides the complete MySQL query for that. – MrUpsidown Apr 27 '20 at 08:50

Vuejs google map show marker/coordinates inside in the center circle

1 Answers1