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

Question

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

Answer 1

我正在使用 Gmap v3 和http://www.ericmmartin.com/projects/simplemodal/ 下面的代码在隐藏/显示后正确渲染地图

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

});

Answer 2

如果您想要最简单的解决方案，请使用 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>

Answer 3

取决于你对“简单”的定义。jQuery UI 具有非常简单的对话框功能。如果没有，请使用 1001 灯箱插件之一。

至于使用谷歌地图——他们有一个强大的 API，应该允许你将你想要的地图类型放在页面上的任何地方——包括在你的对话框中。