Using Fancybox with Google Static Maps

Question

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.

Answer 1

Here's what I came up with. It uses an empty <img> tag, but it works. I'd love to see someone come up with a more graceful solution.

function setUpLocationLinks() {
    var locationLinks = $("a.location_link");
    var mapImage = $("#map_image");
    var mapImageContainer = $("#map_image_container");
    var mapFancybox = function() {
        $.fancybox.hideActivity();
        $.fancybox(
            {
                "showCloseButton" : true,
                "hideOnContentClick" : true,
                "titlePosition"  : "inside",
                "content" : mapImageContainer.html()
            }
        );
    }
    locationLinks.click(
        function() {
            var clickedLink = $(this);
            $.fancybox.showActivity();
            mapImage.attr("src", clickedLink.attr("href")).load(
                function() {
                    mapFancybox();
                }
            );
            if(mapImage.complete) {
                mapImage.triggerHandler("load");
            }
            return false;
        }
    );
}