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

What is GIS?

Once I started writing this blog, I received a number of feedbacks from readers asking me to write something about what exactly GIS is. So here is some information, that will give you an idea about " What is GIS? " A geographic information system (GIS) integrates hardware, software, and data for capturing, managing, analyzing, and displaying all forms of geographically referenced information. GIS allows us to view, understand, question, interpret, and visualize data in many ways that reveal relationships, patterns, and trends in the form of maps, globes, reports, and charts. A GIS helps you answer questions and solve problems by looking at your data in a way that is quickly understood and easily shared. GIS technology can be integrated into any enterprise information system framework. ...

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 😍 😍

Learning React in #41Tweets

Sounds crazy, right? 😲Not really. It is possible! This is no magic pill ✨ . There is no substitute for practice and experience , but this will get you started and help you make the right decisions in your React journey. When I started with React, the sheer use of ES6 syntax and difference in the coding style, made me not want to use it. But when I learned and practiced ES6 and then learned and practiced React, that is when I truly fell in love with React 😍 I created a Twitter Moment Learning React ⚛️ which is basically a collection of #41Tweets that will get you off the ground on your React journey. I hope you like this new approach to learning React and hope it is helpful in getting you started 🤝Let me know your feedback and keep the conversation going on Twitter 🐦

Drive along - Cool coding

This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun! Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...

The UI Dev

Search This Blog