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 - Lexical Declarations - Const

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 - For..of

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

ES6 101 - Lexical Declarations Let

Jquery Mobile Form - Search input

Input field of type search 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 search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box. The seacrch 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 element. Let's take a look at the code sample below to understand the working in a better way. In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attrib...

The UI Dev

Search This Blog