Nonetheless I still have a couple of Javascript issues outstanding which pretty much kill the whole deal since the Google Maps API is entirely a client side, Javascript environment and a big majority of folks still use Internet Explorer.

The first issue is the getElementById method somehow can’t figure out that the map canvas div element is in the DOM tree when it clearly is, throwing an ‘object expected’ error. I am accessing the elements from ajax calls so the entire page has loaded at the time of the calls so the div has obviously been declared by the time it is accessed. I think what I have to do here is check to see if the element is in the DOM tree before trying to access it. Firefox is smart enough to figure it out but I guess IE needs more explicit directions.

The second issue is that my ajax call is throwing the dreaded ‘unspecified error’. Debugging shows the error occurs at the mySACK.runAJAX() line. It is a simple ajax call using a standard implementation of the Simplified Ajax Code Kit, or SACK, and the code works perfectly in Firefox.

    function readMapData(arg) {
      mysack = new sack(ajaxurl); //wordpress admin url for ajax hook
      mysack.setVar('action', 'getVectorMarkers');
      mysack.execute = 0;
      mysack.method = 'POST';
      mysack.setVar('id', arg);
      mysack.onCompletion  = loadOverlay;
      mysack.onError = function() { alert('Ajax error ... '); };
      mysack.runAJAX();
      return true;
    }

The onCompletion callback never fires nor does the onError callback. Since I know there is not an error on the server side the next place I need to debug is inside the SACK ‘onCompletion’ code, which I’m not too crazy about. This is where you go, hmmm, maybe I should have just used jQuery for my Ajax in the first place.

So instead of editing a bunch of code that isn’t mine (the SACK wrapper class) I downloaded and installed the MS Script Editor and used it to find the exact bit of code throwing the error:

  if (this.method == "GET") {
     var totalurlstring = this.requestFile + "?" + this.URLString;
     this.xmlhttp.open(this.method, totalurlstring, true);
  }else{
      this.xmlhttp.open(this.method, this.requestFile, true);
  }

I’m using POST method so it’s the last line throwing the error. This.request is set to the parameter passed when creating the new sack object, in our case the wp_admin url, so the code would translate into

xmlhttp.open('POST', 'http://.../wp-admin/admin-ajax.php', true);

And that’s the benefit of writing these posts. Many times you figure out the problem by the time you finish describing it. When I went to copy the ajaxurl from the editor I noticed a typo in the URL which Firefox can obviously parse but IE can’t–I had the first pair of slashes escaped, eg http:///gulfcoastgeocache.com….

Grr….

So that still leaves me with the aggravating problem of getElementById not working properly. I’m debugging that now. Once I get that one sorted out I will be 90% complete with the plugin leaving only the initial setup script and the options page to finish.