Radius Service Areas Using Google Maps API

Recently we were needing to create a multi-zoned service area for a clients website.  Zone1 would cover from 0-25 mile radius and Zone2 would cover up to 50 mile radius. After a little bit of digging around in the Google Maps API, this was accomplished fairly easily with the maps.circle class. All you need to specify is the center and radius. The API radius is specified in meters. Links to the official docs and examples:

https://developers.google.com/maps/documentation/javascript/shapes#circles

https://developers.google.com/maps/documentation/javascript/examples/circle-simple

The interesting part of this all was using map.fitBounds() to make sure that the map zoom was responsive to different screen sizes. You may want to set padding to zero to override the default 45px that the fitBounds function assigns by default.