0

素敵でシンプルなモーダル ダイアログを使用して、1 つのマーカーでマップを表示したいと思います。これに対する使いやすいソリューションはありますか? 理想的には、Googleマップをサポートするjqueryモーダルダイアログ、または緯度と経度のみを指定してGoogleマップのiframeコードを簡単に取得する方法

4

3 に答える 3

4

私はGmapv3と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');
    }});

});
于 2011-02-12T22:28:14.693 に答える
3

最も簡単な解決策が必要な場合は、gMap で jqueryui dialog() を使用します。

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-13T06:25:35.947 に答える
0

「簡単」の定義によって異なります。jQuery UI には、かなり単純なダイアログ機能があります。そうでない場合は、1001 個のライトボックス プラグインのいずれかを使用してください。

Google マップの使用に関しては、強力な API があり、ダイアログ ボックスを含め、ページ上の任意の場所に必要な種類のマップを配置できます。

于 2010-05-12T22:35:47.090 に答える