Draw moving vehicle’s polygons real-time on Google Maps

Goal – Polygons on Google Maps

The specific goal of plotting polygons on Google Maps real-time is the goal of this article. Consider the following case.

polygons on google maps

Use case for mapping vehicle’s position in real-time

There was a need to manage a fleet of 5 vehicles from the dispatch center. Each vehicle traveled across town and picked up garbage from ditches and town property. Each vehicle transmitted it’s location (latitude, longitude and elevation) coordinates to the dispatch center. The dispatch center collected the coordinates and built polygons as vehicle moved across town. The overall goal was for the vehicle to tell the dispatch center where it is and for the dispatch center to call the vehicle operator if it was going on the same route that was already covered by another vehicle already.

Code on GitHub and Zedfox.us

Let’s get going with code. You can download the full code from https://github.com/zedfoxus/google-maps-demo. A working example of plotting polygons in real-time on Google Maps is also available.

This example uses static data source of polygons in the form of 4 pairs of lat/lon/elevation data as follows. Each pair is a different color. Take the first pair of coordinates. It has longitude, latitude and elevation. These 4 pairs make a polygon. Your application may gather this information from the database in real time by making Ajax calls. For simplicity, a static data source has been used in this example.

-90.00012,45.00045,0 -90.00012,45.00046,0 -89.99988,45.00046,0 -89.99988,45.00045,0

HTML of page that shows vehicle position

Let’s look at the HTML page that shows the map in full-screen. A button to re-draw the map has also been placed on the map as a top-centered drawing toolbar.

Notice the line with drawagain div. That button will be placed in the top center part of the map.

Set up map

Initialization of the map:

Check out the code createSelectionControl. That function will put our button on the top center part of the map. Once the map has initialized, a timer starts in the background that fires up drawPolygon() function every 500 ms (half-a-second). Let’s take a look at what that does.

Draw polygons twice a second on Google Map

drawPolygon will ask parseInformation function to take one item after another from our array of polygon strings and do something with it. After it is done with all items in the array, it clears out the repeated-firing of drawPolygon. The function parseInformation asks setupPolygon to decode the lat/lon from the string for each pair and create a Google Map LatLng object out of it. The polygon string containing 4 pair of lat/lon will now become an array of 4 LatLng items.

parseInformation uses this array to create a Google Polygon object and draw it on the map using setMap method built into Google Maps API. Also, an information window is associated with the newly created polygon so that when it is clicked, an information window will pop up.

Show Info Window when polygon is clicked

Let’s see what the information will contain:

showInformation function will call getMessage, which will construct a message of coordinates. This information will show up in the info window when polygon is clicked.

Redraw the map

The drawing happens rather fast. To redraw, the button in the top-center of the map can be clicked. It will call drawAgain function, which will clear the map and redraw the polygons.

Using this kind of a system, a real-time vehicle monitoring system was constructed. Similar approach can be taken to display point data. Additionally, dispatch units can be given this software with subtle enhancements that can allow them to click on a map where a vehicle has not traveled and put a comment in. When the vehicle approaches this point, the message shows up on their in-vehicle-monitor.

Hope this example helps audiences in drawing polygons in near real-time on Google Maps.