[GIS] 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);
      });
    };