Модальное диалоговое окно Google Maps (JQuery)

Question

Я хотел бы отобразить карту с одним маркером, используя красивый и простой модальный диалог. Есть ли простые в использовании решения для этого? В идеале - модальное диалоговое окно jquery с поддержкой карт Google или способ легко получить код iframe для карты Google, заданный только для широты и долготы

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 () с 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 обладает довольно простой функциональностью диалога. Если нет, используйте один из плагинов лайтбокса 1001.

Что касается использования Google Maps - у них есть мощный API, который должен позволять вам размещать нужный вам тип карты в любом месте на странице - в том числе в вашем диалоговом окне.