谷歌地图模式对话框（JQuery）

我想用一个简单的模式对话框显示带有单个标记的地图。是否有任何易于使用的解决方案？理想情况下，一个支持谷歌地图的jquery模式对话框或一种轻松获取给定纬度和格局的谷歌地图的iframe代码的方法谷歌地图模式对话框（JQuery）

来源

2010-05-12 adrin

取决于您对“easy”的定义。 jQuery UI具有非常直接的Dialog功能。如果没有，请使用其中的1001个灯箱插件。

至于使用谷歌地图 - 他们有一个功能强大的API，应该允许您将所需的地图类型放置在页面的任何位置 - 包括在对话框中。

来源

2010-05-12 22:35:47 Pickle

如果您想要最简单的解决方案，请使用jqueryUI dialog（），使用gMap。

http://jqueryui.com/demos/dialog/#default


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=PLACEYOURKEYHERE" type="text/javascript"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2"); 
</script>


$("#dialog").dialog();

http://gmap.nurtext.de/documentation.html


$("#map").gMap({ 
    latitude:    47.58969, 
    longitude:    9.473413, 
    zoom:     10, 
    markers:    [{latitude: 47.670553, longitude: 9.588479, html: "Tettnang, Germany"}, 
          {latitude: 47.65197522925437, longitude: 9.47845458984375, html: "Friedrichshafen, Germany"}], 
    controls:    ["GSmallMapControl", "GMapTypeControl"], 
    scrollwheel:   false, 
    maptype:    G_NORMAL_MAP, 
    html_prepend:   '', 
    html_append:   '', 
    icon: 
    { 
     image:    "images/gmap_pin.png", 
     shadow:    false, 
     iconsize:   [19, 21], 
     shadowsize:   false, 
     iconanchor:   [4, 19], 
     infowindowanchor: [8, 2] 
    } 
});

这是你的HTML

<div id="dialog" title="Basic dialog"> 
    <div id="map"></div> 
</div>

来源

2010-05-13 06:25:35

我使用GMAP v3和http://www.ericmmartin.com/projects/simplemodal/ 下面alow的代码正确呈现地图隐藏后/显示

$(".open-map").click(function (e) { 
    e.preventDefault(); 
    $("#map-popup").modal({persist: true, onShow: function (dialog) { 
     resize_gmap('map-popup'); 
    }}); 

});

来源

2011-02-12 22:28:14 vixh

感谢花花公子的想法，我的朋友的Pankaj在寻找整天相同的功能和我得到你的答案在这里。再次感谢。 +10给你。 – w3uiguru 2012-04-17 10:56:27

谷歌地图模式对话框（JQuery）

回答

相关问题