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 aclick
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.