In this tutorial, we are pleased to introduce a Google Map API V3 polygon shape creator class. This class was originally published on The-Di-Lab blog as an experiment. It turns out that a lot of users found it useful. We decide to import the article here, and this will be the official page for Google Map API V3 polygon shape creator.
Future code updates and FAQ will be announced on this page, please bookmark this page if you want to stay in touch.

Table Of Content

  1. About
  2. How to use
  3. Demo
  4. Download
  5. The End

Content

1. About

Polygon Creator is a javascript class which can be used to draw a ploygon shape on Google Map, and it currently has two public functions to return the polygon paths and its color. It is useful if you are looking for a ready to use Javascript tool to create polygon for your Google Map application. Polygon Creator is built with Jquery and written in a OOP coding style. It is written in Goolge Map API v3.
And of course, it is completely free, so please make use of it.

2. How to use
  1. Include scripts

    Include Google Map API:

    Include JQuery:

    Include Polygon Creator class:

  2. Create a map object

    If you have already constructed a map object, then you can skip this step. And just keep in mind, you will use the same map object to create Polygon Creator. First make sure you have a Div with id=”main-map” in your page body,then construct a map object as below:

  3. Construct Polygon Creator object

    The parameter of PolygonCreator is the map which we have created above.

  4. Test and Run

    Now you should be able to draw polygon shape on your google map. And there are two class functions you can call to retrieve polygon information:

  5. Other functions

    Destroy the polygon on the map

3.Demo

You can view the demo page from here.

4.Download

You can download this script from my github account.

5.The End

Thank you for reading this article, and if you have any encountered anything different, have a different solution or think our solution is wrong, do let us know in the comment section.
We will be very happy to hear that.

If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue.