Question

我希望点击googlemaps img后将我的google api添加到fancybox。

我希望点击google img后，它会从fancybox打开一个灯箱，然后在灯箱中运行google api。

我知道我可以添加一个iframe并使用fancybox输入，但是因为我现在正在学习javascript，我想看看它是如何工作的。

I have found the js code that is ran from fancybox here

来自灯箱的html是

<div class="fancybox-outer">
<div style="overflow: visible; width: 350px; height: 280px;" class="fancybox-inner">

<img class="fancybox-image" src="images/directv_g_map.jpg" alt="">

</div>
</div>

如果我自己可以做到这一点，我就不会发布这个但是经过10多个小时试图做到这一点后我感到很沮丧，我无法清楚地思考。

- 我一直试图让google api做一个窗口onclick = init;然后运行----没有工作
   - onclick和onload的不同版本----没有工作
   - 我认为最好用的那个是createElement，但我一直无法获得灯箱img的id，因为它只有class标签。   我打算编辑js文件只是为了包含一个if语句，这将创建一个div id然后我可以加载我的google api但是没有运气。
  -if（src ==“directv_g_map.jpg”）然后将src更改为google api

我还在学习，但感谢一些帮助，谢谢你

Answer 1

您需要使用'afterShow'事件，该事件在显示fancybox内容后触发。

然后你可以用div替换fancybox中的图像并初始化谷歌地图。

$(".fancybox").fancybox({
    width   :   '70%',
    height  :   '70%',
    afterShow: function InitMap(){
            //replace image with div 
            $('.fancybox-image').replaceWith("<div id='map' style='width: 100%;height: 100%;'></div>");
            //set up and initialize map
            var mapOptions = {
                    center: new google.maps.LatLng(31.784887,-106.356604),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);    

        }
});

这里是working example

您可以找到有关fancybox事件/方法here的更多信息（此链接位于您的fancybox js文件之上）

将个人Google API添加到Fancybox中

1 个答案: