How to open a fancybox from an gInfowindow link_问答_开发者

How to open a fancybox from an gInfowindow link

开发者 https://www.devze.com 2023-03-29 06:25 出处：网络

I am using google maps API V2 and i need to open a fancybox, from within an infowindow. I tried this(but didnt work):

    GEvent.addListener(marker1, "click", function() {
        var cnt = '<div> <a id="fancybox" href="http://www.google.com/">Link</a></div>';  
    marker1.openInfoWindowHtml(cnt);  

    });

I dont understand why it does not work, because when i do the same but not as a parameter(just in a link somewhere in the page), it works:

 <a id="fancybox" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>

To add the fancy box plugin i use this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
    $("a#fancybox").fancybox();
});
</script>

So as you see, the problem is that when calling the fancy box, from within openInfoWindowHtml(), it doesnt work.

Ill appreciate some help.

map is now on the link: http://joostudio.info/test/

As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.

Here is complete page source code

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
    $("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com开发者_JAVA百科/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript">
var map;

function runmap() {

        var myLatlng = new google.maps.LatLng(43.154541,19.12315);

        var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        var infowindow = new google.maps.InfoWindow({});

        var marker1 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(43.145086,19.090633),
        });

        google.maps.event.addListener(marker1, "click", function () {
            infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
            infowindow.open(map, marker1);
        });

}
</script>

</head>

<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>

How can I simply call fancybox from google maps v3 marker?

Thanks a lot

I think your problem is that the html including your link displayed in infowindow does not "exist" at the time you setup the fancybox.

I think you can solve this problem by providing a DOM node instead of string with HTML. Simply create a hidden div with your link, you want to display and it should work.

Ran into to a similar problem myself, it's very hard to get an event to stick to an element inside a Google Maps, I tried both Fancybox and Colorbox but I got the same result on both. My solution to this was to use and good old onclick directly on the element, so something like:

<a href="your url" onclick="$.fancybox.open({href:'your url'}); return false;">link</a>

Hope this solves your issue.

How to open a fancybox from an gInfowindow link

精彩评论

关注公众号

热门标签

图文推荐

How to open a fancybox from an gInfowindow link

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：