1

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

jeff
  • 7,850
  • 2
  • 28
  • 43
Graham Kennedy
  • 736
  • 6
  • 18

1 Answers1

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
        });


    });
}
jeff
  • 7,850
  • 2
  • 28
  • 43
lukeshumard
  • 178
  • 1
  • 6
  • Hi @lukeshumard, apologies for the late response. I didn't notice that this was an open question. I can't recall if your solution worked, but I believe it contributed to the ultimate solution so I'm going to mark it as the answer. – Graham Kennedy Oct 17 '12 at 06:25