Spherical Cap

    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.

    Hope you find this piece of code interesting. If you have any queries, requests or suggestions, feel free to leave a comment. Till then, happy mapping!