01/19

Google Map API

Google Maps Drawing Library & Geolocation API

This is a perfect set of tools provided to us by "google" to draw and create polygons and lines on a map, which may allow you with various applications.

In my case it was as simple as making routes on a map, using lines and drawing polygons encompassing these routes, it took a little while to get adpated to the use of library but it was quiet straight forward. Google has an excellent documentation available here.

Geolocation API

The first step was using the geolocation API, to find the place on the map, cause going to different places wasn't really a option, spanning all through India to find a particular place wasn't the most beautiful user experience.

I adopted my code from a jsfiddle I found, here.It did everything I wanted and was upto the mark, I just had to remove the suggestive search, cause there were way too many alternatives.

Making Routes

The task was very to the point, what we needed was two markers to indicate the start and the end pointers of the route and a line joining the two markers.

For this, I used the polyline option provided, making two markers with custom images for a start and stop. Then there is the geolocation API, that we are using from the above example, followed by a clear button which basically just removes all the polylines and markers from the website.

See the Pen zxwqWm by Sidharath Chhatani (@bladefury3) on CodePen.

Making Ploygons

The second task was super easy, as it had more to do with the logic at my end instead of google map API's. Just draw a polygon using the polygon tool which provides you with a n-point polygon for use and provides a [lat,lon] pair for each point.

Then finding which points lie in the zone, was a backend task for me.

See the Pen emWZLL by Sidharath Chhatani (@bladefury3) on CodePen.

This was my experience with the Google Maps API, tell me if you find any optimizations or changes. Follow me @sidharathc.

END
UP NEXT