Fancybox infowindow Google Map

问题

I want to know how to open a fancybox popup when clicking on a marker in google map. I know that this question has already been asked but the answers are wrong or unanswered. Many people would like to know the technique to do this even though I think very few people have the answer ... So it would be very nice from you if you have a clear and precise answer. Here is an attempt I made, but that does not work.

<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>

回答1:

The href-option expects a URL, not a HTML-fragment:

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

来源：https://stackoverflow.com/questions/14757583/fancybox-infowindow-google-map

标签

javascript

jquery

html

google-maps-api-3

fancybox