Setup

• I have multiple links on a page with the class location_link
• Each Links rel attribute is equal to a city state combo (i.e.,Omaha, NE)
• Once the page is loaded, a JavaScript function loops through all of the location_link items and binds a click event to them using jQuery.
• This click event fires a call to the Fancybox constructor that is supposed to show a Google Map of the location that link is associated with

The Problem:

Whenever I click on one of the "location links", I get the following error message:

The requested content cannot be loaded. Please try again later.

Code I've Already Written:

function setUpLocationLinks() {
    locationLinks = $("a.location_link");
    locationLinks.click(
        function() {
            var me = $(this);
            console.log(me.attr("href"));
            $.fancybox(
                {
                    "showCloseButton" : true,
                    "hideOnContentClick" : true,
                    "titlePosition"  : "inside",
                    "title" : me.attr("rel"),
                    "type" : "image"
                }
            )
            return false;
        }
    );
}

Research I've Already Done:

• The Google Static Map API no longer requires an API Key. The following is from the Google Static Maps API Page

Note: The Google Static Maps API no longer requires a Maps API key! (Google Maps API Premier customers should instead sign their URLs using a new cryptographic key which will be sent to you. See the Premier documentation for more information.)

• The The Image URL I'm using does resolve and pulls back the data I need
• When I put the above mentioned URL into a standard <img> tag, the map shows up just fine.
• I'd like to pull this off without having to create some sort of dummy <img> tag that I'm constantly switching the src attribute out of.

Hopefully, you'll find this information helpful. Please let me know if you have any other questions.