In some of the earlier posts, I have shown some examples related to creating Polygons and Polylines on the Google Map using the Google Maps API v3. In addition to this generic polygon class, the Javascript Google Maps API also includes a specific class for Circle to simplify its construction. In today’s example, I am going to show you how to generate a circle or a spherical cap on the map.
A
Circle
is similar to a Polygon
in that you can define custom colors, weights, and opacities for the edge of the circle (the "stroke") and custom colors and opacities for the area within the enclosed region (the "fill"). Colors should be indicated in hexadecimal numeric HTML style.
Unlike a
Polygon
, you do not define paths
for a Circle
; instead, a circle has two additional properties which define its shape: - Center: Specifies the center of the circle using google.maps.LatLng
- Radius: Specifies the radius of the circle in meters.
Let us now have a look at the code which is pretty simple and easy to understand.
When you will execute the above code, you will see a Terrain map centered at Pune with a circle of radius 100km also centered at Pune. The output will look as seen in the results section above.
Comments
Post a Comment
Please leave your comments here...