Question

我正在尝试在锚定点击上加载谷歌地图。以下是详细信息。

我有 index.aspx 页面，其中我有一个锚标记和div“divLoadMap”

<a class="loadMap" href="map.aspx">Load Map</a>
<div id="divLoadMap">
</div>

我有 map.aspx ，其中包含地图详情。以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple Jquery CSS Tabs and V3 Google Maps</title>

     <script type="text/javascript" src="/common/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" language="javascript">

    $(document).ready(function() {

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     };     
            var map = new google.maps.Map(document.getElementById("map_canvas"),         myOptions);


            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

     initialize(); 

    });

    </script>

</head>
<body>
   <form id="mapform" >
   <div id="map_canvas" style="width: 500px; height: 500px">
   </div>
   </form> 
</body>
</html>

现在我想在点击 index.aspx 上的锚标记时加载此地图。

请建议!!如果可以获得上述问题的代码示例，我将不胜感激。

Answer 1

您可能想尝试一个处理iframe的灯箱插件。 Pirobox就是一个例子。

此插件使用rel属性设置灯箱选项。在您的情况下，您将使用iframe- width-height 参数。您的代码将如下所示：

//using 'full' for width and height will make the lightbox fullscreen 
//or you can specify a width and height in pixels.
<a href="map.aspx" rel="iframe-full-full" class="pirobox_gall1" >Load Map</a>

Answer 2

我想到了以下方法。

使用id ='GoogleMapContainer'
默认设置为display：none。
在这个div中，声明iframe并将此iframe的src属性分配给index.aspx页面。
现在onclick of anchor tag调用一个javascript函数，在内部将调用上面声明的div的查询模式对话框。
这将导致弹出窗口包含谷歌地图。

7

<div id="GoogleMapContainer" title="Google Map Container" style="display: none;">
        <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx"
            frameborder="0" scrolling="auto"></iframe>
</div>

点击锚标记调用javascript函数。并在该javascript函数中编写此代码：

$ jq（“＃googleMapContainer”）。dialog（{         莫代尔：是的，         宽度：750，
        标题：'谷歌地图'，         可调整大小：false，
        open：function（type，data）{             $ JQ（本）.parent（）appendTo（ “形式”）。         }     }）;

请建议是否正确的方法或我需要做一些修改!!

Answer 3

以这种方式使用....

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     };     
            var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions）;

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

    });

    </script>

现在只需在锚点击或点击按钮上调用此initialize（）函数.....

如何在锚点击上使用jQuery加载谷歌地图

3 个答案: