We should talk!

We would love to hear from you. Feel free to give us a call at 800.285.7353 (626.581.5272 direct). Or shoot us a quick note—we’ll be sure to get back to you right away.

We would love to hear from you!

Quick Launch

Atera Prime > Blog > Google Maps + Fusion Tables + Customization - Blog
April 06
Google Maps + Fusion Tables + Customization

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!

 

Comments

There are no comments for this post.
Copyright © 2011–2012 Atera Prime, Inc. All rights reserved.
All trademarks and registered trademarks are property of their respective owners.
3838 E Foothill Blvd, Pasadena, CA 91107
Office: 626-581-5272
Toll Free: 800-285-7353