Dealing with a CORS issue, I found a solution using jsonp and callback=? as recommended in the discussion on XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin Additionally, I enabled '--allow-file-access-from-files' for Chrome and hosted it on Google App Engine, accessing it via Firefox.
However, when I switched to using classes in JavaScript (via CoffeeScript), I encountered an error specifically related to the use of class methods. By avoiding the class/instance method, I was able to resolve this issue:
The problem arises when attempting to display multiple locations on a Google Map by calling the Google Fusion Table API for data retrieval and display. It functions properly without issues as a regular method, but triggers an error when called as a class method both locally and on Google App Engine.
Thank you
var myMap = new MyMap();
google.load('visualization', '1.0', {"callback":myMap.initialize});
class MyMap
initialize: -> //Javascript equivalent: MyMap.prototype.initialize = function() {
...
jqxhr = $.get(encodeURI(url), @dataHandler, "jsonp") // Does not work.
//Javascript equivalent: jqxhr = $.get(encodeURI(url), this.dataHandler, "jsonp");
jqxhr = $.get(encodeURI(url), dataHandler, "jsonp") // This works without the @
//Javascript equivalent: jqxhr = $.get(encodeURI(url), dataHandler, "jsonp");
dataHandler: (d) -> // Does not work. Javascript equivalent: MyMap.prototype.dataHandler = function(d) {
dataHandler= (d) -> // This works. Javascript equivalent: dataHandler = function(d) {
Local Error:
XMLHttpRequest cannot load ?. Origin file:// is not allowed by Access-Control-Allow-Origin.
Hosted/Server Error:
GET ? 400 (Bad Request)