The-Di-Lab

Google Map API v3 polygon shape creator

June 24th, 2010

5 comments

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

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>

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);
```
Construct Polygon Creator object

The parameter of PolygonCreator is the map which we have created above.
```
var creator = new PolygonCreator(map);
```
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() 
```