Skip to main content

Posts

Showing posts with the label Google maps api v3 polyline example

Geodesic Polyline

    Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere.     The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change.     Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve a...

On-click polyline

    Following up on the last example where we saw how to add a hard-coded polyline to our map, today we will see a more user interactive polyline example. In this example we will discuss on-click polyline! What you need to do is, copy the following code into a txt file and save it with dot html (.html) extension and then view it in your browser. So here goes the code!     The output of the above code will be a map centred at Mysore. Click on the map for the first time and a marker will appear there. On the next click, another marker will appear with a polyline between the 2 markers. This will continue for all further clicks and here you have your "On-click polyline" running! The map looks something like seen in the image below!     The next step to this code will be creating a polygon. We will see examples to create polygons on the map at a later stage! If you have any queries or suggestion, please drop a comment here or feel free to ...

--- Polyline ---

    We have seen a number of examples for markers and info-windows. We can definitely move ahead now with other things in Google Maps API v3. Today we will have a look at polylines. Today's example will show a hard-coded polyline, but later on we will have a look at creating polylines on the fly. We will also create polygons and calculate the geographic area and more but at a later stage!     Let us now first have a look at today's polyline code. You just need to copy and paste the code that follows into a text file and save it as .html. Double-click on the file and you will be able to see the map in action.     The output of the above code looks as seen in the result section above! The code is very simple and does not require any special explanation I guess! We have made use of an array to store the co-ordinates that form the polyline on the map! Rest is mostly as usual!     Please feel free to drop me a line about t...