Using Google Fusion Table layer in Chrome Extension

Question

I am trying to replicate this demo code: https://developers.google.com/fusiontables/docs/samples/circle_example?hl=en which uses a FusionTablesLayer to query the data in the fusion table. Primarily

var layer = new google.maps.FusionTablesLayer({
   query: {
      select: 'lat',
      from: tableid,
      where: 'ST_INTERSECTS(lat, CIRCLE(LATLNG(44.988265,-93.259191), 5000))'
   },
   key: myKey
});
layer.setMap(map);

I have it working as a stand along page, with all the JS moved to another file, per the Chrome Extension guidelines. I have modified the manifest file to allow all the referenced servers in the content security policies setting.

{
  "name": "GDG Twin Cities - Fusion Tables and Chrome extensions",
  "version": "1.0",
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://maps.google.com https://maps.gstatic.com; object-src 'self'",
  "description": "Moving Fusion Tables demo into the chrome extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://maps.google.com/"
  ]
}

However I now get an error in the Console of "Uncaught Error: Code generation from strings disallowed for this context "

How would I work with the FusionTablesLayer to get what I am looking for into my chrome extension?

Answer 1

I ended up moving the functional browser action page to the web, and putting an iFrame in the popup.html.