Fancybox 信息窗口 谷歌地图

Question

我想知道如何在点击谷歌地图中的标记时打开一个花式框弹出窗口。 我知道这个问题已经被问过，但答案是错误的或没有答案。 很多人想知道做到这一点的技术，尽管我认为很少有人有答案...... 因此，如果您有明确而准确的答案，您将非常高兴。 这是我做的一个尝试，但这不起作用。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
function initialize() {

    var mapOptions = {
      zoom: 4,
       disableDefaultUI: true,
      center: new google.maps.LatLng(45.35, 4.98),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);

    addMarkerWithWindow("Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
    addMarkerWithWindow("Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}


function addMarkerWithWindow(name, coordinate, map) {
 $.fancybox({
     content: contentForBox
});

var image = 'rss.png';
var marker = new google.maps.Marker({
  map: map,
  icon: image,
  position: coordinate
});


    var styles = [
   {
      featureType: "all",
      stylers: [
        { saturation: -15 },
        { lightness: -10 },
      ]
    },

            ];
map.setOptions({styles: styles});



  var contentForBox = '<a class="fancybox" rel="group"   href="http://www.ministryofsound.com/Uploads/radio/Chilled_96_artistImage_jpg_l.jpg"><img     src="small_image_2.jpg" alt="qs" /></a>';


       var div = document.createElement('DIV');
    div.innerHTML = 'hello';

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

    $.fancybox({
        href: contentForBox


        // other options
    });


});
}
initialize();
});//]]>  
google.maps.event.addDomListener(window, 'load', initialisation);
</script>

Answer 1

href-option 需要一个 URL，而不是 HTML 片段：

google.maps.event.addListener(marker, 'click', function() {
 $.fancybox({
  href: 
    'http://www.ministryofsound.com/Uploads/radio/Chilled_96_artistImage_jpg_l.jpg'
 });
});