Make a polygon using Google Maps API v3

Polygon using Google Maps

Google Maps API v3 makes it really easy for us to make polygons on the map. In this post we will look at an example of creating polygon using Google Maps.

Requirements

  • create a polygon using Google’s drawing tools. After drawing the polygon, drawing tools should disappear
  • click on the polygon to show a dialog box, click edit to edit polygon
  • click on the polygon to show a dialog box, click done to save the edits
  • click on the polygon to show a dialog box, click delete to delete the polygon, and then show drawing tools to draw another dialog box

Final Result

The final result is available on Make a polygon page. Feel free to click on the polygon drawing tool and click on different parts of the map. Join back to where you started or double click to allow Google Maps to finish the polygon automatically.

Entire solution – so concise!

Let’s see how it is all put together. Feel free to create your own web page using the following code. You are free to download map-polygon-example.js to complete your own example. The Javascript file is well documented. The code is also on https://github.com/zedfoxus/google-maps-demo and a full-screen version is available also http://zedfox.us/projects/google-maps-demo/make-polygon/.

Details of the functionality in Javascript map-polygon-example.js is included below.

Initialization function

Let’s understand the functioning of the Javascript. We begin with creation of the core items we will need in the mapping process.

The last line invokes the function named initialize immediately. Let’s see what initialize does.

The initialize function begins with setting up a center point for the map and some options. There are several mapOptions that can be configured during startup. We have chosen to set the mapTypeID to SATELLITE but you can choose from HYBRID, TERRAIN, ROADMAP or SATELLITE. Once these options are created, we will as Google Map API to build us a map and stick the map into <p id=”map-canvas” style=”height: 300px;”></p> tag. While we are at it, we will create a variable to hold dialog boxes when our polygons will be clicked.

Drawing tools

Building drawing tools is rather easy. Google makes it very easy for us to build them like so:

DrawingManager class provides many outstanding options. We can allow users to create MARKER, CIRCLE, RECTANGLE, POLYLINE and POLYGON. The hand icon is there by default to drag the map around and general navigation. In the function above, the polygon creation icon will be displayed along with the hand icon. Not only that, we have customized properties of the polygon that can be created. Once these options are set, we attach the drawing manager to the map we created.

At this point the user will be able to click on the polygon icon and create a polygon easily by marking points on the map and double-clicking on the map to auto-complete the polygon. Once the polygon is created, I’d like to do different things such as hide the drawing manager, pop open a dialog box containing instructions to edit/save/delete the polygon. First things first – let’s do something so that the polygon listens to click events.

Drawing manager – detect completion of polygon

Drawing manager generates an event when polygon drawing is complete. We leverage that event by listening on it and once polygoncomplete event is received, we:

  • hide drawing manager
  • save the polygon’s shape and disallow dragging it or editing it
  • add custom object to the polygon
  • attach a listener

Drawing manager – hide or show

It is simple to hide or show the drawing manager. Setting the drawing manager’s drawingControl property to true will show the drawing manager, and false will hide it. The following function can be called as ShowDrawingTools(true) to show drawing manager, and ShowDrawingTools(false) to hide it.

Newly created polygon – disable/enable editing and dragging

It is desired by our application to disable the polygon editing and dragging capabilities once the polygon is created. It is trivial to do so. After an object is created, such as myField polygon object, the object’s settings can be changed by calling the setOptions method and passing appropriate key/value property pairs. Below is a function that will enable or disable dragging and editing of a polygon.

Add custom properties to a polygon

Creation of a polygon is beneficial but addition of properties to a polygon adds power to the application. Javascript has everything as objects. Properties can be added seamlessly. We can create a standalone object with properties and attach it to myField polygon like the code shows below. This way, metadata can be associated with the polygon.

Attach click event to polygon

It is desired that when a user clicks on the polygon a dialog box opens up with links to edit the polygon, save the polygon using a link called ‘Done’ and delete the polygon. Let’s attach a click event to the polygon. google.maps.event.addListener takes the polygon, event type and a function as arguments. We attach click event to myField. When the event is caught, a function executes that builds appropriate message and uses that in the invoked dialog box myInfoWindow where the user clicked. myInfoWindow’s setPosition method can be used to set the position where the dialog box will show up.

Delete polygon

Deleting the polygon should detach myField polygon from the map after closing any open dialog boxes, and then enable the drawing controls so that another polygon can be drawn. That is accomplished using the code below:

Calculate area of the polygon

Google Maps API already has a function called google.maps.geometry.spherical.computeArea that takes polygon’s path as a parameter and returns area in square meters. The above function leverages this function and returns area in acres instead of square meters.

Message show in the dialog box

The message shown the dialog box will have 3 links: Edit, Done, Delete. Clicking the edit link should allow editing and dragging of the polygon. This can be easily done by the PolygonEditable method we have already described above. Sending true to this method will enable editing and dragging of the polygon. It will also disable the controls so that another polygon cannot be drawn in parallel to editing the existing one.

When Done is clicked, polygon editing and dragging is disabled. This is trivial and can be done by sending false to PolygonEditable method.

Delete link will call the method above to delete the polygon. With all the supporting methods in place, the links can be generated. Since the polygon has an object associated with it that carries metadata, one can display the metadata in the dialog box also. Leveraging GetArea method allow us to provide area to the user in the dialog box as well.

Polygons can have one or more paths. The first path is the boundary of the polygon. If there are more paths, they would either indicate polygons inside the polygon, or holes in the polygon. Polygon’s getPath method returns the first path. Path’s getArray method will give an object containing lat and lon as properties for each vertex. Vertex (plural – vertices) is the corner points that connects lines/sides in the polygon. Let’s put our understanding together to create a message that will show up in a dialog box.

This explanation concludes our desire to build the application to requirements specified at the top of the post.