check if a coordinate is contained within a circle in google maps?

Question

I'm trying to make an application that tells me if a coordinate is contained in a circle.

for that every time I click on a point on the map a I get the coordinate.I would like to know if that new coordinate is contained within the circle or not

I would also like to know how I can make a circle occupy 5 meters around from a coordinate. in my example the radius is: 50000 but I do not know how to perform the conversion to set the value in meters.

this is my code:

http://plnkr.co/edit/OI4sjcuS526rFYxPnvDv?p=preview

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat:4.624335 , lng: -74.063644 },
        zoom: 5,
    });

    //circle coordinates
    var circle = new google.maps.Circle({
        map: map,
        radius: 50000,    
        fillColor: '#FFFFFF',
        opacity:0,
        center:{lat:4.624335 , lng: -74.063644 }
    });   

    google.maps.event.addListener(map, 'click', function(e) {
        //I get new coordinates ( e.latLng)
    });
}

thanks!

Updated

They have marked this question as a duplicate, with this solution (http://jsfiddle.net/kaiser/wzcst/embedded/result/)

but it does not really satisfy my problem, because as you can see in the image, the solution fails.

Answer 1

As from what I have understood in your question, what your'e trying to do is

1. display the map
2. create a circle in map
3. upon clicking in the map, determine if the point is outside or inside the circle

There is a post about this here in SO: Check if a latitude and longitude is within a circle google maps. If you check on the accepted answer (credits to Guffa for the genius algorithm), he used this function to check if the point is within the radius:

// credits to user:69083 for this specific function
function arePointsNear(checkPoint, centerPoint, km) { 
   var ky = 40000 / 360;
   var kx = Math.cos(Math.PI * centerPoint.lat / 180.0) * ky;
   var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
   var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
   return Math.sqrt(dx * dx + dy * dy) <= km;
}

Now as for what you are trying to achieve, you could just simply add this inside your click event. Here's what I did:

google.maps.event.addListener(map, 'click', function(event) {
  var click = event.latLng;
  var locs = {lat: event.latLng.lat(), lng: event.latLng.lng()};
  var n = arePointsNear(user, locs, diameter);

Then I added the condition that if the function returns true, the marker will have a label "I" (short for inside).

  if(n){
    marker = new google.maps.Marker({
      map: map,
      position: locs,
      label: {
        text:"I", //marking all jobs inside radius with I
        color:"white"
      }
    });

Then if it didn't, the marker will then be marked "O" (short for outside)...

  }else{
    marker = new google.maps.Marker({
      map: map,
      position: locs,
      label: {
        text:"O", //marking all jobs outside radius with O
        color:"white"
      }
    });
  }
});

Here's the sample application that I have created, just in case you want to see it in action: http://jsbin.com/hujusod/edit?js,output

This is a possible duplicate of Check if a latitude and longitude is within a circle google maps . Or How To Display Content Based on Closest Lat/Long to Entered Address.

But since function is used in a different way, I posted my answer to help you do what you originally intended to. Feel free to upvote the answer from where the arePointsNear function came from if that's what you only need.

I hope this helped!