Connect with me:

Articles

Latlng Sphere

Google Static Map – How to Draw a Radius around a Point

Well, after a very long time trying to find a way to generate a Google Static Map with a filled circle of a specific Km radius around a specified map point, I’ve finally done it!!!

I always knew this could be done, but I did not have the time or mathematical skills to program it from scratch, so I have been searching on and off for the last year for a function that already did it – with no luck. The trick for me was that I needed to do it totally server-side in PHP (without using the Maps API), and simply get a static map URL including the encoded polyline parameter.

If like me, you have been searching for a simple solution to what should be a simple task, you will have found that the only way to do it is by drawing a Polygon that resembles a circle. This involves plotting a number of points in a circle around your given centre point, and then encoding the coordinates so they can be passed to the google static maps request.

Although I could find many examples, nothing provided a complete solution for my needs, so I thought I would share the method I ended up using in case others were running into the same issues as me. Be warned, this is not production code, it is largely untested as is very likely to contain bugs and inaccuracies. But, on face value it appears to work – use it at your own risk. I am sure it can be improved in many ways, please feel free to add comments at the end of the post (all comments are moderated).

Getting Started

One thing that I required was Gabriel Svennerberg’s PHP polyline encoding class (this is essentially a port of Mark McClure’s Javascript polyline encoding class). I really could not see any point writing a new one from scratch when this awesome library has already been made available.

You should save the above library somewhere appropriate on your web server (without the “.txt” extension), we need it later.

Generating The Points of The Circle

The part I struggled with most was generating the latitude and longitude points that will make up the circle. Obviously this is just math, but not my strongest area – so I ended up taking various javascript examples and using them as a starting point for creating a PHP function (I would love to give credit to the people who wrote the original scripts, but to be honest, they had been pasted and copied around the web so many times that I don’t have any idea who to acknowledged - but thanks). The below function will generate the points, and then encode them using the library downloaded above (you will need to make sure you adjust the path to the file based on where you saved it).

I think the above code is pretty self explanatory. As you can see, the function takes four parameters, the last one is optional.

  1. The latitude of the centre of the circle
  2. The longitude of the centre of the circle
  3. The radius of the circle (in kilometres)
  4. The detail of the circle (after all, it is just a bunch of straight lines). A setting of “1″ will create a maximum of 360 points, “2″ will create 180, “3″ will create 90 etc. The key here is to make sure you don’t end up with so many lines that the encoded string is too long to be parsed – have a play with it and see for yourself.

Putting it All Together

Now it is simply a matter of creating a static map URL and including the encoded polyline path.

And there you have it, a static map with a circle around a point.

You can see a complete working example of my solution here.

I have also packaged the working example up and you can download a zip file below.

You are free to use and modify this code however you like, but please be good enough to drop me a comment if you found it helpful.

 

  1. Ryan07-15-2014

    I’m in the process of implementing this, and everything is awesome except… Can you overlay multiple circles on one map? I’d like to do a 2, 5, and 7 mile radius on a map.

    • Jomac07-16-2014

      I’ve not had the need to add multiple circles, but I expect with some small changes to my code you could encode multiple ploylines and append them to the static map URL. One thing to be aware of is the length restrictions of the URL. Good luck.

  2. logicallylogic07-16-2014

    Hi Jomac,

    A awesome page you have, and I am in the process of same requirement as this, with a bit different, as I need to put another poly line on the same map, as in your code you are using poly-line path, I don’t think it’ll support to have another path.
    but if you have way to produce this radius area, It would be great.

    Ryan, I do think this will answer yours, and would you mind to let me know if you success to achieve what are you working on.

  3. moriarty07-28-2014

    Hi Jomac:

    Tried this in php. Seems to works great. Do you have a javascript version of this (and the polyline encoder) ?

Leave a Reply


7 − 2 =

Just Because...