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.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Make Points Using Google Maps API v3; Show Ohio Counties using FusionTables</title>
    <style>
        img { 
            max-width: 100%; 
        }
        #map-canvas img { 
            max-width: none; 
        }
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing,geometry"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="make-polygon-extended-example.js"></script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

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.

    // declare variables that will be used in this example
    var myMap;                  // holds the map object drawn on the 
    var myDrawingManager;       // holds drawing tools
    var myField;                // holds the polygon we draw using drawing tools
    var myInfoWindow;           // when our polygon is clicked, a dialog box 
                                // will open up. This variable holds that info
    var centerpoint;            // center point of the map
    var fusionTablesLayer;      // fusion-tables layer
    var myPoint;                // point marker

    /**
     * Initialization function that sets up the map
     */
    function initialize() {
        // build the map's center poiint
        centerpoint = new google.maps.LatLng(42.67134,-81.56302);

        // assign map the options of zoom, center point and set the map to
        // SATELLITE
        var mapOptions = {
            zoom: 7, 
            center: centerpoint
        };

        // on our web page should be a <div> or <p> tag with id map-canvas
        // show the map in that element with the options listed above
        myMap = new google.maps.Map(
            document.getElementById('map-canvas'), 
            mapOptions
        );

        // create a dialog box but don't bind it to anything yet
        myInfoWindow = new google.maps.InfoWindow();

        // show drawing tools
        DrawingTools();

        // show fusion tables layer
        ShowFusionTables();
    }

    // jQuery
    $(document).ready(function() {
        initialize();
    });

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.

    /**
     * Show fusion table layer
     * URL: https://www.google.com/fusiontables/DataSource?docid=1Hky8qXEOcJQmTbndHmrHWo8-yhRBLV3U31HwEg#rows:id=1
     * Notice that the field geometry contains the KML
     */
    function ShowFusionTables() {
        layer = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: '1Hky8qXEOcJQmTbndHmrHWo8-yhRBLV3U31HwEg'
            },
            styles: [{
                polygonOptions: {
                    fillColor: '#fbefef',
                    fillOpacity: 0.3
                }
            }]
        });
        layer.setMap(myMap);
    }

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.

    /**
     * Show drawing tools
     */
    function DrawingTools() {

        // drawingMode of NULL, which means that the map drawing tools will
        // have no default drawing tool selected. If drawingMode was set to 
        // google.maps.drawing.OverlayType.POLYGON, polygon would be auto-
        // selected
        // drawingMode of NULL, which means that the map drawing tools will
        // have no default drawing tool selected. If drawingMode was set to 
        // google.maps.drawing.OverlayType.POLYGON, polygon would be auto-
        // selected
        // drawingModes can have multiple information. Over here we are adding
        // point (aka marker) and polygon capabilities.
        myDrawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: null,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.MARKER,
                ]
            },
            markerOptions: {
                icon: 'http://zedfox.us/projects/google-maps-demo/make-polygon-extended/waterdrop.png'
            },
            polygonOptions: {
                draggable: true,
                editable: true,
                fillColor: '#cccccc',
                fillOpacity: 0.5,
                strokeColor: '#000000',
            }
        });
        myDrawingManager.setMap(myMap);

        // when polygon drawing is complete, an event is raised by the map
        // this function will listen to the event and work appropriately
        FieldDrawingCompletionListener();

        // when point drawing is complete, an event is raised by the map
        // this function will listen to the event and work appropriately
        PointDrawingCompletionListener();
    }

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.