CODEWITHSUNDEEP
javascriptgoogle-maps
Robbiegod
Robbiegod

Reputation: 1014

Google Fusion Map - Dynamic Menu queried from the google fusion table

I am pretty sure that I know what the problem is with my code, but I am unsure how to fix it.

I have a google fusion table that i am querying to generate a menu that has radio buttons in it. A map that is a google fusion table visualized like a google map is also on the page.

When i hard code a couple radio buttons and click them it makes the items light up on the map based on the ID of the element. I using google.maps.event.addDomListener to make this magic work. So that works great.

Now i want to take it one step further and actually pull the data from a google fusion table so it shows the most up to date list of items i have in my table. So, I'm using jQuery and a $.get command to get the feed in jsonp. I'm outputting 2 columns of data and dynamically building radio buttons by attaching them with a innerHTML line -- attaching it to a div.

So, I'm thinking the problem has to do with the DOM, but i am not sure how to get the radio buttons to load in first and then load in the map so all is available to the maps events so clikcing the radio actually does something.

The question is what modifications do i need to make so my dynamic generated radio buttons will work with my google fusion map?

Here is my javascript code:

    function initialize() {
    var table = ########;


  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(30.6, -108.1),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer();
    filterMap(layer, table, map);

    getData(table);

    google.maps.event.addDomListener(document.getElementById('num1'),
        'click', function() {
          filterMap(layer, table, map);

    });

    google.maps.event.addDomListener(document.getElementById('num2'),
        'click', function() {
          filterMap(layer, table, map);

    });

    }


  // Filter the map based on checkbox selection.
  function filterMap(layer, table, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: "State",
          from: table,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
  }

  // Generate a where clause from the checkboxes. If no boxes
  // are checked, return an empty string.
  function generateWhere() {
    var filter = [];
    var bugs = document.getElementsByName('bug');
    for (var i = 0, bug; bug = bugs[i]; i++) {
      if (bug.checked) {
        var BugName = bug.value.replace(/'/g, '\\\'');
        filter.push("'" + BugName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "'BugName' IN (" + filter.join(',') + ')';
    }
    return where;
  }


    // build the menu     
    function getData(table) {
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
    var queryUrlTail = '&jsonCallback=?'; // ? could be a function name

    // write your SQL as normal, then encode it
    var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
    }

    function dataHandler(d) {
    // get the actual data out of the JSON object
    var data = d.table.rows;

var ftdata = ['<div>'];

for (var i = 0; i < data.length; i++) {
    ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+'');
}

ftdata.push('</div>');
    document.getElementById('ft-data').innerHTML = ftdata.join(''); 
    } 


   google.maps.event.addDomListener(window, 'load', getData);
   google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 0

Views: 1245

Answers (1)

dcritchlow
dcritchlow

Reputation: 21

This site had a bunch of example code. http://csessig.wordpress.com/category/fusion-tables/

Upvotes: 2

Related Questions