Question

I’m looking to replace the default Google Maps API InfoWindow with a Fancybox overlay.

Version

Google Maps API 3.0

Goal

Replace the default Infowindow with a Fancybox popup

Use Case

1. Google map is loaded up in full screen (100% by 100%)
2. Markers are placed onto the map
3. User clicks on a marker and is shown a Fancybox popup that overlays the map
4. User clicks on “X” in the top right hand corner of the Fancybox to close it

I’m at a loss as to how best to tackle this. Is it easiest to call Fancybox using the addListener event handler, passing in the marker as a parameter? If so, how would any of you recommend doing this?

For example:

google.maps.event.addListener(marker, 'click', function(){
    // Call Fancybox, but how?
});

Thank you in advance,

Graham Kennedy

Answer 1

I’ve found that the best way to go about this is to pass in your content manually with Fancybox’s href method. Works like a charm for me.

function addMarker(data) {

    // build the window contents
    var contentForBox = data;

    google.maps.event.addListener(marker, 'click', function() {

        $.fancybox({
            href: contentForBox
            // other options
        });


    });
}