Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>tl;dr</strong>? <strong><a href="http://jsfiddle.net/kaiser/Hhb5M/" rel="nofollow">jsFiddle here</a></strong> - look at your console output.</p> <p>Basically there're two ways to do this:</p> <ol> <li>Check if the (marker of) the user is inside the Circle Bounds</li> <li>Compute the distance between the user and the center of the Circle. Then check if it is equal or smaller than the Circle Radius. This solution needs the <code>spherical</code> library to work.</li> </ol> <h2>Circle Bounds</h2> <p>Just add a circle:</p> <pre><code>circle = new google.maps.Circle( { map : map, center : new google.maps.LatLng( 100, 20 ), radius : 2000, strokeColor : '#FF0099', strokeOpacity : 1, strokeWeight : 2, fillColor : '#009ee0', fillOpacity : 0.2 } ) </code></pre> <p>and then check if the marker is inside:</p> <pre><code>circle.getBounds().contains( new google.maps.LatLng( 101, 21 ) ); </code></pre> <p>At a first glance you <strong>might think</strong> this works. But it doesn't. In the background google (still) uses a rectangle, so everything inside the rectangular bounding box, but outside the circle will be recognized as <em>inside</em> the latLng bounds. It's wrong and a known problem, but it seems Google doesn't care.</p> <p>If you now think that it would work with rectangular bounds, then you're wrong. Those don't work either.</p> <h2>Spherical Distance</h2> <p>The easiest and best way is to measure the distance. Include the spherical library by appending <code>&amp;library=spherical</code> to your google maps script call. Then go with</p> <pre><code>google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng( 100, 20 ), new google.maps.LatLng( 101, 21 ) ) &lt;= 2000; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload