Display Counties on Google Maps with Fusion Tables

Google Maps with Fusion Tables to show counties

Google Maps with Fusion Tables can help with stunning visualizations. This article displays counties on Google Maps extending our previous polygon making example. In the previous article we discussed how a polygon can be drawn and other requirements can be fulfilled. In this example, we will extend our requirements.

Requirements

  • create a point using Google’s drawing tools. After drawing the point, drawing tools should disappear
  • click on the point to show a dialog box, click delete to delete the point
  • show Ohio’s counties on the map using Google’s FusionTables
  • attach a listener and display Information Window when point is clicked

Final Result

The final result is available on Make Points Using Google Maps API v3; Show Ohio Counties using FusionTables  page. Feel free to click on the point drawing tool and click on different parts of the map. Full source code is available on https://github.com/zedfoxus/google-maps-demo.

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.

Details of specific parts of code are included in the discussion 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. We will focus on creation of Ohio counties first

Ohio Counties on Google Maps using FusionTables

At the time of this writing, FusionTables are experimental. Google does a fantastic job of providing county KMLs in the form of FusionTables. View Ohio’s counties on FusionTables. Boundaries for other states and other interesting FusionTables are also available. Let’s use Ohio’s counties from FusionTables and draw them on the map.

In the code above, we are creating a FusionTablesLayer (layer based on FusionTables). Query node indicates where the information comes from. Notice in the link of Ohio Counties FusionTables https://www.google.com/fusiontables/DataSource?docid=1Hky8qXEOcJQmTbndHmrHWo8-yhRBLV3U31HwEg that there’s a docid. This is the string that goes in the from: tag.

We want to select a column/field from FusionTable that holds the KML. That field is geometry, and we’ll use it in our query. Let’s provide it some styles of our liking. Finally, add this layer to the map.

Enable drawing of Markers in Drawing tools

Previously, we drew polygons on the map using Drawing Manager. In the code below, we are adding marker (i.e. point) to the Drawing Manager.

Notice that we have added markers to the Drawing Manager. We have also included the icon that we should use by default when drawing the point on the map. After the point is drawn, we detect the coordinates of the point and build a message that can be shown in the Information Window when the point is clicked.

Other requirements are identical to the previous example and will not be detailed in this article.