1.3 Google Map API: Buffers/Circles

[google documentation for circles]
Google calls them “circles”, but in essence, these are buffers around a single point since the measurement is in meters, and the shape is accurate to the specified radius (in other words, it is not always a perfect circle, given that Google uses a Mercator projection).

  1. First, make sure you have an existing html file with a working maproom
  2. Then, create a new object that encapsulates your buffer’s (or circle’s) properties. This object does not do anything just yet. It simply defines the property of the circle you will eventually draw. Put this object at the end of your “initialize” function:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var bufferOptions = {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            center: new google.maps.LatLng(34.052234, -118.243684),
            radius: 5000
          };
  3. Finally, create a new variable that adds the circle to the map with the options you just defined:
    1
    var cityCircle = new google.maps.Circle(bufferOptions);

Leave a Reply