开发者

Calling Fancybox from Event Listener in Google Maps Instead of Default Infowindow

开发者 https://www.devze.com 2023-02-07 05:49 出处:网络
I\'m looking to replace the default Google Maps API InfoWindow with a Fancybox overlay. Version Google Maps API 3.0

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. M开发者_运维百科arkers 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


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


    });
}
0

精彩评论

暂无评论...
验证码 换一张
取 消