谷歌地图模式对话框(JQuery)
问题描述:
我想用一个简单的模式对话框显示带有单个标记的地图。是否有任何易于使用的解决方案?理想情况下,一个支持谷歌地图的jquery模式对话框或一种轻松获取给定纬度和格局的谷歌地图的iframe代码的方法谷歌地图模式对话框(JQuery)
答
取决于您对“easy”的定义。 jQuery UI具有非常直接的Dialog功能。如果没有,请使用其中的1001个灯箱插件。
至于使用谷歌地图 - 他们有一个功能强大的API,应该允许您将所需的地图类型放置在页面的任何位置 - 包括在对话框中。
答
如果您想要最简单的解决方案,请使用jqueryUI dialog(),使用gMap。
http://jqueryui.com/demos/dialog/#default
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&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>
答
我使用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');
}});
});
感谢花花公子的想法,我的朋友的Pankaj在寻找整天相同的功能和我得到你的答案在这里。再次感谢。 +10给你。 – w3uiguru 2012-04-17 10:56:27