Google Maps Marker – Check if in circle

Google Maps Mashups often need to check if some markers are in a defined area/radius, where the center is the user. Calculating this isn’t too easy – if you don’t know some tricks.

I’ve seen extremely complicated ways to get around this. When you’ve searching the web for calculating the area of a circle, then you maybe also stumbled upon solutions like the (highly precise) Haversine formula, custom math that (is not as precise and) builds upon the Pythagoras formula, uses prototype stuff or even loads the google maps geometry library. It seems to me, that no one on the web (and I spent a notable time on going through search results) has really read the documentation. Too bad. They missed something that makes their life much easier.

A working example

You can try to drag & drop the markers around. The status bar will change its condition (true/false) and tell you if the marker is in the circle or not. It also works with moving the circle around.

Toolset: Stuff you need
  • the static Google Maps library1) – API v3
  • jQuery2) (optional)
The idea behind

Google Maps offers the LatLngBounds constructor. That’s the most easiest way you can imagine, to check if a marker is within certain boundaries. You need nothing more than to draw a circle, get its bounds and the markers latitude & longtitude and then check, using the contains method, if the marker is within the boundaries of the circle.

The Code

First we need a circle. That’s pretty simple and straight forward:

// Define the circle
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');

Then, get the circles bounds (here comes the magic): Use the native getBounds(); method. Most people believe that this method can be used for rectangles only, but they are wrong. It belongs to the LatLngBounds Constructor and delivers the most painless possibility to check if a marker is inside a (for e.g.) circle (or polylines, rectangulars) or not.

// Get the bounds
var bounds = circle.getBounds();
// Log into the dev bar console whether the marker is inside or outside
console.log( bounds.contains( latLngA ) );

You can take a look at the complete code at my jsFiddle account. I engage you to fork it and link back your enhancements in the comments. And – of course – we also have a fullscreen example.

That’s all folks!

  • 1) You don’t need to download it. Just load the script directly from google: copy/paste the url and add it as script into your head. The last url part is only needed for embedding in jsFiddle: “This will trick jsFiddle to recognize it as JavaScript resource.
  • 2) jQuery is optional, as you can achieve the same result with plain js (don’t forget: jQuery is a Framework, not a language).

3 thoughts on “Google Maps Marker – Check if in circle

    • I know – just saw it some days ago. The actual problem with some of the Google APIs is, that they keep throwing updates (sub-versions) in, which we don’t notice. We, as devs, can only choose between outdated (v2) or current (v3) APIs. It already stopped working once – and later did work again. Let’s see if they fix it at some point. From the code you can see, that it should work. The failure is inside circle.getBounds().

Comments are closed.