• Google Map API v3 polygon shape creator
  • About
  • How to use
  • Demo
  • Download
  • The End

#Google Map API v3 polygon shape creator

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.

#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.

#How to use

1. Include scripts

Include Google Map API:

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Include JQuery:

   <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Include Polygon Creator class:

   <script type="text/javascript" src="polygon.min.js"></script>

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:

   var singapoerCenter=new google.maps.LatLng(1.37584, 103.829);
   var myOptions = {
   zoom: 10,
   center: singapoerCenter,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById('main-map'), myOptions);

3. Construct Polygon Creator object

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

   var creator = new PolygonCreator(map);

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:

   creator.showData() 

   creator.showColor()

5. Other functions

   Destroy the polygon on the map

   creator.destroy();

#Demo

You can view the demo page from here.

#Download

You can download this script from my github account.

#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.