UPDATE: After spending another day working on this, I believe I have identified the issue, although it is not yet confirmed. Once I have verified the solution, I will update this post with an answer.
My current understanding is that the problem arises from loading the Google Maps API via the AjaxLoader utility in GWT. This causes the google.maps.OverlayView to not be resolved when the javascript library containing the USGSOverlay code is being loaded, resulting in the line
USGSOverlay.prototype = google.maps.OverlayView();
clearing out the prototype information for the object. I am now in the process of dynamically loading the USGSOverlay library after the completion of the AjaxLoader.loadApi() method.
Another indication of the issue: Setting the prototype to google.maps.OverlayView() disrupts both the inheritance of USGSOverlay and a test object added at the end of the file. If I modify the inheritance of my USGSOverlay object by adding these lines at the start of the JS library file,
function OverlayParent() {
}
OverlayParent.prototype.setMap= function(map) {}
and change my USGSOverlay.prototype to equal new OverlayParent(), the inheritance works properly and I no longer encounter the exception this.SetMap(map) is not a function.
If anyone has a ready-made solution for this issue, I would appreciate a link, but I am exploring a solution similar to this approach DOM-Based On-Demand Javascript
Although I am new to JavaScript, I am a seasoned programmer, and this particular problem has me puzzled. Despite several days of work, I have made little progress. In my latest attempt, I am almost exactly replicating the code from Google Maps JavaScript API v3 CustomOverlay. The documentation for OverlayView states "You should inherit from this class by setting your overlay's prototype to new OverlayView.prototype." While I don't believe the issue I'm facing is limited to the Google Maps API, here is the code snippet:
function USGSOverlay(bounds, image, map) {
// Initializing all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Property to store the image's div.
this.div_ = null;
// Explicitly calling setMap() on this overlay
this.setMap(map);
}
USGSOverlay.prototype = new google.maps.OverlayView();
USGSOverlay.prototype.constructor=USGSOverlay;
Followed by implementations for onAdd, draw, and onRemove as previously described.
While stepping through the code everything seems fine until the call to the inherited method setMap throws the following exception:
Cannot load Google Maps API to your browser (TypeError): this.setMap is not a function;
Firebug reveals that the proto variable is not set, indicating that the inheritance is not taking place. Initially, I was calling the constructor via a GWT JSNI function, but to eliminate that possibility, I created a second test JavaScript object to verify the parameters passed are correct. Here is the function:
function TestUSGSOverlay(map,inBound) {
var swBound = new google.maps.LatLng(39.5, -106.0);
var neBound = new google.maps.LatLng(40.0, -105);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var sw = inBound.getSouthWest();
var ne = inBound.getNorthEast();
var marker = new google.maps.Marker({
position: sw,
map: map,
title:"South West Corner"
});
var marker2 = new google.maps.Marker({
position: ne,
map: map,
title:"North East Corner"
});
var srcImage = 'images/DenverWest.png';
var usgsMap = new google.maps.GroundOverlay(srcImage,bounds);
usgsMap.setMap(map);
this.overlay = new USGSOverlay(bounds, srcImage, map);
}
If I exclude the last line, the map displays correctly between the South West and North East markers with the U.S. Geological Survey map. Although my actual requirement is to display text in a table div, for testing purposes, I substituted the map display.
I have read several articles on prototype inheritance, and while I understand it is complex, none of my attempts have led to any progress. The same behavior occurs in IE 8 as well as Firefox. Any advice or guidance you can provide would be greatly appreciated, as I am running out of ideas.