多fancybox谷歌地图 [英] Multiple fancybox google map

问题描述

如何在不同的标记中加入不同内容的弹出式fancybox？
我设法设置了fancybox，但您可以看到两个标记的内容相同。
我想找到一种方法将不同的内容放在我的fancybox中，供每个制造商使用。

How to put a popup fancybox with different content in different markers? I've managed to set up the fancybox but you can see that it is the same content for two markers. I would like to find a way to put different content in my fancybox for each maker.

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

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

 <!-- ne pas utiliser --> 
  var url= "http://www.fancyapps.com/fancybox/";
  <!-- ne pas utiliser -->

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

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

    $.fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    href : "rssddd/FeedEk_demo.html",
    type : 'iframe'

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

Démo： http://ps3land.franceserv.com/

推荐答案

将第四个参数传递给 addMarkerWithWindow（），例如：

Pass a 4th argument to addMarkerWithWindow() , e.g:

addMarkerWithWindow("Lemans", new google.maps.LatLng(48.006922, 0.20874), map,
                    'http://lemans.org');
addMarkerWithWindow("Paris", new google.maps.LatLng(48.856291, 2.352705), map,
                    'http://parisinfo.com');

使参数在函数内可访问：

Make the argument accessible inside the function:

function addMarkerWithWindow(name, coordinate, map, href) {
  //your code
}

并将它用作fancyBox的href-option：

and use it as href-option for fancyBox:

$.fancybox({
  maxWidth  : 800,
  maxHeight : 600,
  href      : href,
  type      : 'iframe'
});

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