A jQuery Plugin for Google Map Thumb(Magnifier)

        Introduction:


                    Recently in one of my project I came across with a requirement to show a thumbnail(or magnifier) in Google map because there was a lot of custom objects(line, polygon, etc) on my Google map due to which the map become obscure. I was able to successfully implement this option. But I have also created a jQuery plugin, so that if anyone else came across the same issue, can reuse the functionality. In this article, I will show you how to use this plugin. Here is a quick demo.


        Description:


                    I am not going to bore you further, just download the jquery.gmapthumb sample from github or install it via nuget. Also, a sample has been attached with this blog. You just need to include the jquery.gmapthumb.js(or jquery.gmapthumb.min.js) file in your page and add this script. $('#map').gmapthumb([map]). Note that the map object is inside square bracket(array) because you can bind multiple maps with just one line(see example in above link for further reference). Finally, you need to place the img folder inside your page directory.


        Summary:


                    In this article, I showed you how you can show a thumbnail(magnifier) in your Google map very quickly. I have also attached a sample with this blog. Hopefully you will enjoy this article too.



No Comments