当我点击谷歌地图时,如何打开漂亮的照片iframe窗口

时间:2013-07-19 16:34:10

标签: jquery google-maps prettyphoto

我在谷歌地图上创建了一些路线,我需要为某些路线添加一些信息。示例I在地图中单击并创建标记A.然后再次单击并创建标记B.在A和B上有折线。但是当我点击B时,我需要打开一张带有漂亮照片的窗口,以便询问有关此路线的一些信息。 问题:如何使用谷歌地图的事件监听器打开包含表单的漂亮照片窗口。

google.maps.event.addListener(map, 'click', function(e){
        //open pretty photo iframe window
    });

非常感谢进步...... 最好的问候,

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码在漂亮照片上打开Goog​​le地图。

 <html>
                <head>
                    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
                    <script type="text/javascript" charset="utf-8"> 
                        google.load("jquery", "1.4.2");
                    </script>
                    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
                    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

                    <!-- Google Maps Code -->
                    <script type="text/javascript"
                        src="http://maps.google.com/maps/api/js?sensor=true">
                    </script>
                    <script type="text/javascript">
                      function initialize() {
                        var latlng = new google.maps.LatLng(-34.397, 150.644);
                        var myOptions = {
                          zoom: 8,
                          center: latlng,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);
                      }

                    </script>
                    <!-- END Google Maps Code -->
                </head>
                <body>
                    <p><a href="#?custom=true&width=260&height=270" rel="prettyPhoto">Open a Google Map</a></p>

                    <script type="text/javascript" charset="utf-8">
                    $(document).ready(function(){           
                        $("a[rel^='prettyPhoto']").prettyPhoto({
                            custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                            changepicturecallback: function(){ initialize(); }
                        });
                    });
                    </script>
                </body>
            </html>