Как открыть fancybox по ссылке gInfowindow - PullRequest
Новая
       22

Как открыть fancybox по ссылке gInfowindow

1 голос
/ 20 августа 2011

Я использую Google Maps API V2, и мне нужно открыть fancybox из информационного окна. Я попробовал это (но не сработало): 

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

    });

Я не понимаю, почему это не работает, потому что, когда я делаю то же самое, но не как параметр (просто в ссылке где-то на странице), это работает: 

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

Чтобы добавить плагин Fancy Box, я использую это: 

<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>

Итак, как вы видите, проблема в том, что при вызове модного бокса из openInfoWindowHtml () он не работает.

Я буду признателен за помощь.

карта теперь на ссылке: http://joostudio.info/test/

Как видите, из нижнего изображения fancybox работает просто отлично, но когда я вызываю его из окна карты, оно не работает.

Вот полный исходный код страницы 

<!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/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>

Как мне просто позвонить в fancybox из маркера google maps v3?

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 08 февраля 2012

Я столкнулся с подобной проблемой, очень трудно получить событие для привязки к элементу в Картах Google, я пробовал Fancybox и Colorbox, но я получил одинаковый результат на обоихМоим решением было использовать старый добрый клик непосредственно на элементе, так что-то вроде: 

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

Надеюсь, это решит вашу проблему.

0 голосов
/ 21 августа 2011

Я думаю, что ваша проблема в том, что html, включая вашу ссылку, отображаемую в информационном окне, не "существует" во время установки fancybox.

Я думаю, что вы можете решить эту проблему, предоставив узел DOM вместо строки с HTML. Просто создайте скрытый div со своей ссылкой, которую вы хотите отобразить, и она должна работать.

...