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
- Google map is loaded up in full screen (100% by 100%)
- M开发者_运维百科arkers are placed onto the map
- User clicks on a marker and is shown a Fancybox popup that overlays the map
- 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
});
});
}
精彩评论