Google Maps modal dialog (JQuery)

Question

I would like to display a map with a single marker using a nice and simple modal dialog. Are there any easy to use solutions for this? Ideally a jquery modal dialog with support for google maps or a way to easily get an iframe code for a google map given latitude and longitute only

Answer 1

Depends on your definition of "easy". jQuery UI has pretty straightforward Dialog functionality. If not, use one of the 1001 lightbox plugins out there.

As for using Google Maps - they have a powerful API that should allow you to place the type of map you want anywhere on the page - including in your dialog box.

Answer 2

Use jqueryui dialog(), with gMap if you want the simplest solution.

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

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=PLACEYOURKEYHERE&quot; type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
<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]
    }
});

Here is your html