Question

I am trying to load a static google map into a fancybox/lightbox when clicking on a link.
My code is

<a href="http://maps.googleapis.com/maps/api/staticmap?
 zoom=13&size=400x400&markers=color:blue|32,50&sensor=true"><img src="icon.png" /></a>

But it won’t show, the iframe stays empty. I guess it’s because the map is supposed to be loaded as the src of an IMG element, right?

Any idea how to solve this issue?

An alternative would be to open a normal google map in theviframe but then it always shows two markers, one at the location and one “best guess” by google – is there a way to remove that “best guess” marker? See http://blog.felixsalomon.net for an example, click on the little map icon next to the title of the first post.

Thanks!

Answer 1

Static maps (using Google Static Map API) can be rendered as regular images.

Since your link :

<a class="fancybox" href="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x400&markers=color:blue|32,50&sensor=true"><img src="icon.png" /></a>

… doesn’t tell fancybox that this is an image (because it doesn’t have an image extension), you have to force the type of content fancybox needs to handle like :

$(".fancybox").fancybox({
    "type":"image"
});

Notice that I added class="fancybox" to the anchor so fancybox can be bound to that selector.

See JSFIDDLE (using fancybox v1.3.4)

EDIT : Since you are using a fancybox WP plugin, alternatively you can add the image extension to the anchor at the end of the URL, adding &filename=image.jpg for instance … so your full URL will look like :

href="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x400&markers=color:blue|32,50&sensor=true&filename=image.jpg"

If you do this, you don’t have to edit the Easyfancybox script. Check updated JSFIDDLE