How to Use the Google Maps API Distance Radius

You can customize a Google map to address the specific needs of your website audience using the Google Maps 3.0 API. One method is to place a circle showing a distance radius around a particular location. For example, place a circle showing a five-mile radius around a tourist location, so users can view hotels and restaurants close to the attraction. To create a distance radius around a location or marker, use the Google Maps "Circle" class.

Instructions

1. Open your HTML file and move to the section containing the Google map code.

2. Scroll down the code until you find the code where you define the location or marker. To find the marker easily, search for the term "google.maps.Marker" in your HTML file.

3. Underneath where you define the marker, create the "Circle" overlay and bind it to the marker. For example, type:

   var circleExample = new google.maps.Circle({
   map: map

4. Add the circle's radius in meters around the marker:

   var circleExample = new google.maps.Circle({
   map: map
   radius: 5000

5. Create a fill color for the circle. You define the color using a hexadecimal format. For example, type:

   var circleExample = new google.maps.Circle({
   map: map
   radius: 5000
   fillColor = #FFFFFF
   });

6. Associate, or bind, the circle to the marker:

   var circleExample = new google.maps.Circle({
   map: map
   radius: 5000
   fillColor = #FFFFFF
   });
   circleExample.bindTo ('map', marker);

7. Save your map and test it. Google Maps displays a white circle with a radius of 5,000 meters around the marker location.

References

• Google Code: Google Maps Javascript API V3 Reference