title: Calculate Marker In Circle
body: <p>Base on this <a href="http://jsfiddle.net/kaiser/wzcst/light/" rel="nofollow">http://jsfiddle.net/kaiser/wzcst/light/</a> example, but the marker in circle is not accurate, when the marker is outside circle and near to circle it is consider inside the circle which is not wanted.</p>
  
  <p>Is there any other idea?</p>
  
  <p><strong>code snippet</strong> (from linked fiddle):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function init() {
    var
      contentCenter = '&lt;span class="infowin"&gt;Center Marker (draggable)&lt;/span&gt;',
      contentA = '&lt;span class="infowin"&gt;Marker A (draggable)&lt;/span&gt;',
      contentB = '&lt;span class="infowin"&gt;Marker B (draggable)&lt;/span&gt;';
    var
      latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
      latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
      latLngA = new google.maps.LatLng(37.2, -94.1),
      latLngB = new google.maps.LatLng(38, -93),
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: latLngCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
      }),
      markerCenter = new google.maps.Marker({
        position: latLngCMarker,
        title: 'Location',
        map: map,
        draggable: true
      }),
      infoCenter = new google.maps.InfoWindow({
        content: contentCenter
      }),
      markerA = new google.maps.Marker({
        position: latLngA,
        title: 'Location',
        map: map,
        draggable: true
      }),
      infoA = new google.maps.InfoWindow({
        content: contentA
      }),
      markerB = new google.maps.Marker({
        position: latLngB,
        title: 'Location',
        map: map,
        draggable: true
      }),
      infoB = new google.maps.InfoWindow({
        content: contentB
      })
      // exemplary setup: 
      // Assumes that your map is signed to the var "map"
      // Also assumes that your marker is named "marker"
      ,
      circle = new google.maps.Circle({
        map: map,
        clickable: false,
        // metres
        radius: 100000,
        fillColor: '#fff',
        fillOpacity: .6,
        strokeColor: '#313131',
        strokeOpacity: .4,
        strokeWeight: .8
      });
    // attach circle to marker
    circle.bindTo('center', markerCenter, 'position');
  
    var
    // get the Bounds of the circle
      bounds = circle.getBounds()
      // Note spans
      ,
      noteA = jQuery('.bool#a'),
      noteB = jQuery('.bool#b');
  
    noteA.text(bounds.contains(latLngA));
    noteB.text(bounds.contains(latLngB));
  
    // get some latLng object and Question if it's contained in the circle:
    google.maps.event.addListener(markerCenter, 'dragend', function() {
      latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
      bounds = circle.getBounds();
      noteA.text(bounds.contains(latLngA));
      noteB.text(bounds.contains(latLngB));
    });
  
    google.maps.event.addListener(markerA, 'dragend', function() {
      latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
      noteA.text(bounds.contains(latLngA));
    });
  
    google.maps.event.addListener(markerB, 'dragend', function() {
      latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
      noteB.text(bounds.contains(latLngB));
    });
  
    google.maps.event.addListener(markerCenter, 'click', function() {
      infoCenter.open(map, markerCenter);
    });
  
    google.maps.event.addListener(markerA, 'click', function() {
      infoA.open(map, markerA);
    });
  
    google.maps.event.addListener(markerB, 'click', function() {
      infoB.open(map, markerB);
    });
  
    google.maps.event.addListener(markerCenter, 'drag', function() {
      infoCenter.close();
      noteA.html("draggin&amp;hellip;");
      noteB.html("draggin&amp;hellip;");
    });
  
    google.maps.event.addListener(markerA, 'drag', function() {
      infoA.close();
      noteA.html("draggin&amp;hellip;");
    });
  
    google.maps.event.addListener(markerB, 'drag', function() {
      infoB.close();
      noteB.html("draggin&amp;hellip;");
    });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0
  }
  html,
  body,
  #map {
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: .9em;
    color: #fff;
  }
  #note {
    text-align: center;
    padding: .3em;
    10px;
    background: #009ee0;
  }
  .bool {
    font-style: italic;
    color: #313131;
  }
  .info {
    display: inline-block;
    width: 40%;
    text-align: center;
  }
  .infowin {
    color: #313131;
  }
  #title,
  .bool {
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;div id="note"&gt;&lt;span id="title"&gt;&amp;raquo;Inside the circle?&amp;laquo;&lt;/span&gt;
    &lt;hr /&gt;&lt;span class="info"&gt;Marker &lt;strong&gt;A&lt;/strong&gt;: &lt;span id="a" class="bool"&gt;&lt;/span&gt;&lt;/span&gt;&amp;larr;&amp;diams;&amp;rarr; &lt;span class="info"&gt;Marker &lt;strong&gt;B&lt;/strong&gt;: &lt;span id="b" class="bool"&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="map"&gt;test&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>