Hey Guys!
This blog post is going to cover the awesomeness of Google
Maps, and how fusion tables can help make Google Maps easier to use. At last, we will take it a step further by making
it all customizable, by introducing custom infoWindows.
You can read more about Fusion Tables here. In fusion tables, you can store location
information, like Latitude/Longitude, or KML.
You can also store other information like description of the place, a
title, etc. You must then set the visibility of your table to Unlisted or Public,
else Google Maps will not be able to access your map.
Once you have your fusion table, you must get the ID
of the fusion tables by going to File -> About. For this example, I will be using the fusion
table 3454357,
which contains the information for the map of California.
You must first reference Google Maps API: <script src="http://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
To build a map, we must first set up the map:
// This is the Lat
and Long for the center of California.
var california = new google.maps.LatLng(35.458606, -119.355165);
// Set map center to CA and zoom level to
entire state
// *NOTE: ‘map-canvas’ must be replaced by
the DIV you wish to draw map on
map = new
google.maps.Map(document.getElementById('map-canvas'),
{
center: california,
zoom: 5,
mapTypeId: 'roadmap'
});
We can now set the Fusion tables
layer:
// Set Fusion Table
Layer
layer = new
google.maps.FusionTablesLayer({
query: {
// The column that has the geo information
select: 'geometry',
// The ID of the fusion table from File
-> About
from: '3454357'
},
map: map,
options: {
// We
won’t show default popup, but instead show custom popups
suppressInfoWindows: true
}
});
Here we set the fusion table and set
suppressInfoWindows to true. This was we
can show out own data inside the infoWindows, which is quite helpful once you
have the same regions but different data.
For instance, you need to show the data for the census of the United
States. You can simply set all the
states in the fusion table, and when you have to show infoTables, popup your
own custom data.
The final step is to show your own
data in the popup by targeting the maps onClick listerner.
// Your own custom infoWindow
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function
(e) {
// Show
popup (Custom HTML or simple text)
infoWindow.setContent(myData);
infoWindow.setPosition(e.latLng);
infoWindow.open(map);
});
You now have Google Maps your locations pre-coded and your data
customized. This can be very useful in
research projects, where you have the same location but your data changes every
year.
Thanks for reading!