Onclick geodesic polyline

We have seen what is geodesic polyline and its example in the previous post. We have also seen a simple polyline example before. It's now time for an onclick geodesic polyline example and I will discuss it here today. Let's head on to the example straight away...

You can copy the above code in a text file and save it with .html extension. Now click on this html file, which will open it in your browser and you will see your map in action! The output of the code looks as seen in the result section above.

There is one thing that needs explanation in this code. The use of geometry library in the script tag. What is this geometry library and why is it required will be an obvious question. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter. The Google Maps JavaScript API V3 geometry library provides utility functions for the computation of geometric data on the surface of the Earth. The library includes two namespaces:

1. Spherical contains spherical geometry utilities allowing you to compute angles, distances and areas from latitudes and longitudes.

2. Encoding contains utilities for encoding and decoding polyline paths according to the Encoded Polyline Algorithm.

If you have any queries or doubts, suggestions, constructive criticism regarding this post or the blog in general, please feel free to drop me a mail!

Comments

Recommended for You

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

ES6 101 - Lexical Declarations Let

Jquery Mobile Form - Slider control

Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute. As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form. The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...

My first blog!

" W hy is it that there are no Goolge Maps API examples which show India specific data?"...This question kept bothering me all through my learning phase. I always thought why aren't there any examples that use a map which shows Indian locations. Anybody who is new to Google Maps API application development would love to see a location that he knows of on the map! This is what I longed for all the way through and now have decided to put up simple examples and other supporting data for building customised simple Google Maps and all will show locations in India! When starting something new, if one finds something familiar out there, then it gives a feeling of comfort! And this is what I will try to provide to all those out there who are facing a similar problem that I faced! I am not an expert at Google Maps API, I am learning too...But, I will like to help out people along the way! So, all comments from the novice to the profession...

Ground Truth - How Google Builds Maps

Todays's article is cross posted from The Atlantic 's Tech section. The article was posted by Alexis Madrigal who is a senior editor at The Atlantic , where he oversees the Technology channel. So, thanks to The Atlantic and Alexis Madrigal, we will have an exclusive look inside Ground Truth , the secretive program to build the world's best accurate maps. Behind every Google Map, there is a much more complex map that's the key to your queries but hidden from your view. The deep map contains the logic of places: their no-left-turns and freeway on-ramps, speed limits and traffic conditions. This is the data that you're drawing from when you ask Google to navigate you from point A to point B -- and last week, Google showed me the internal map and demonstrated how it was built. It's the first time the company has let anyone watch how the project it calls GT, or "Ground Truth," actually works. Google opened up at a key moment in its evo...

The UI Dev

Search This Blog