将个人 Google API 添加到 Fancybox

Question

一旦我的 googlemaps img 被点击，我想将我的 google api 添加到 fancybox。

heres the url

我希望点击 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 时遇到了麻烦，因为它只有类标签。 我计划编辑 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文件上面）