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

by

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!

Leave a comment