Using Fancybox with Google Static Maps
- by Levi Hackwith
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.
