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!

Comments

Recommended for You

Google Map within an image

Hope you'll enjoyed the last post describing how two maps can be placed side-by-side on the same webpage ! Most of you'll will enjoy today's code example too! All of you out there who work on Google Maps API, must have visited the API home page several times! You must have seen the map within the Google Nexus Phone frame there! It appears as though there is a map visible on the mobile screen! One of friend asked me the other day if I could implement that, and I did it and here is the code that I am sharing with you all! I have used an I-Pad frame and am displaying a map centered at India within it! Here is the code! The output of the above code is as seen in the result section above! The map that is appearing within the frame is not just an image but can be dragged like any other Google Map! Enjoy the code. It is very simple to understand! In case you have any queries regarding the same, feel free to le...

What do you do with Google Maps API...?

By now we definitely know that Google Maps API stands out amongst other applications in creating interactive world maps. There are a couple of others which may be static, 2D or even 3D, etc, but Google maps have unique and distinctive features that make experienced webmasters prefer them over others. Besides, being a great way to locate and navigate to places, Google maps API also provides many area and length measurement functions. These APIs’ allow for the development of web applications like measure distances and land features online with the Google maps embedded in them. The Google Maps API has been considerably the most popular mapping API in the world. The Google Maps API delivers the standard interactive, easy-to-use features which are beneficial for your business. Google Maps A...

Retriving co-ordinates...

We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window. Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; //When using event as a parameter to a function declare map, strictly as a global variable fun...

Google Street View Image API

Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look. Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...

Jquery Mobile - List dividers

How about organizing your listview items? You can organize your listview items by adding the list dividers to have a well organized listview page. In the example that follows, let us take a look at how we can achieve this. Like any other Jquery example this too can be achieved in a very simple and easy way. Just add the data-role="list-divider" to any list item that you want to specify as a list divider. Adding data-role="list-divider" will style that list item as a blue bar - blue being the default swatch theme. In the example that follows, we have 3 list divider list items (li) which are - "Interesting Articles", "Google Maps API" and "Jquery Mobile" Hope you have followed the example above. We still have got a few more listview examples in the pipeline before we take the next step in Jquery Mobile framework. In case you have any doubts or have not followed the example, drop a comment and I will be happy to help! ...

The UI Dev

Search This Blog