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.