Visualizing Google Fusion Table Map using JavaScript?

Question

When you create a google Fusion Map with geographic data, Google provides you with an iframe link to display the Map on your website. But I need to display that information through Javascript for customization etc.

How do I go about it?

Answer 1

Check out this example:

https://developers.google.com/fusiontables/docs/samples/custom_markers

It shows you how to query a Fusion Table and create a marker for each row of data.

You could modify the createMarker() function to give the marker a different icon depending on a certain criteria/column value that you pass to it.

e.g

var createMarker = function(coordinate, colour) {
      var marker = new google.maps.Marker({
        map: map,
        position: coordinate,
        icon: new google.maps.MarkerImage('images/' + colour + '_icon.png')
      });
      google.maps.event.addListener(marker, 'click', function(event) {
        infoWindow.setPosition(coordinate);
        infoWindow.setContent('This is a' + colour ' + 'icon');
        infoWindow.open(map);
      });
    };

Answer 2

The FusionTablesLayer Wizard is a really good way to get started. http://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesLayerWizard/src/index.html

Once you plug in your information, it gives you all of the code you need for a simple FusionTablesLayer map with standard Google Maps controls, and some basic filtering if you wish. You can stop there or you can customize even further. The wizard is nice, too, because it lets you see how the code changes as you change different parameters.

If you need more FusionTablesLayer guidance, here's where I would go next: https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-simple. Be sure to check out all of the pages on Fusion Tables.

Answer 3

You should take a look to Geocodezip web page. There is a lot of examples and some are about what your are looking for.