Fancybox infowindow Google地图 [英] Fancybox infowindow Google Map

问题描述

我想知道如何在Google地图上点击标记时打开fancybox弹出窗口。
我知道这个问题已经被问到，但答案是错误的或者没有答案。
很多人都想知道这样做的技巧，即使我认为很少有人能够得到答案...
如果您有清晰准确的答案，那么您会很开心。
这是我所做的一个尝试，但这是行不通的。

 < 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）; 
} 
 
 
函数addMarkerWithWindow（name，坐标，地图）{
 $ .fancybox（{
 content：contentForBox 
}）; 
 
 var image ='rss.png'; 
 var marker = new google.maps.Marker（{
 map：map，
 icon：image，
 position：coordinate 
 $）
 
 
 var style = [
 {
 featureType：all，
 stylers：[
 {饱和度：-15}，
 {亮度：-10}，
] 
}，
 
]; 
 map.setOptions（{styles：styles}）; 
 
 
 
 var contentForBox ='< a class =fancybox =grouphref =http://www.ministryofsound.com/Uploads/radio/ Chilled_96_artistImage_jpg.jpg>< img src =small_image_2.jpgalt =qs/>< / a>'; 
 
 
 var div = document.createElement（'DIV'）; 
 div.innerHTML ='hello'; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 
 $ .fancybox（{
 href：contentForBox 
 
 
 //其他选项
}）; 
 
 
}）; 
} 
 initialize（）; 
}）; //]]> 
 google.maps.event.addDomListener（window，'load'，initialisation）; 
< / script> 
  

解决方案

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

pre $ lt; code> google.maps.event.addListener（marker，'click'，function（）{
$ .fancybox（{
href：
'http://www.ministryofsound.com/Uploads/radio/Chilled_96_artistImage_jpg_l.jpg'
}）;
}）;

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>

解决方案

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

这篇关于Fancybox infowindow Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！