CODEWITHSUNDEEP
jquerygoogle-maps-api-3
adrin
adrin

Reputation: 3848

Google Maps modal dialog (JQuery)

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

Upvotes: 0

Views: 14277

Answers (3)

mike clagg
mike clagg

Reputation: 840

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;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]
    }
});

Here is your html

<div id="dialog" title="Basic dialog">
    <div id="map"></div>
</div>

Upvotes: 3

vixh
vixh

Reputation: 478

I'm using Gmap v3 and http://www.ericmmartin.com/projects/simplemodal/ The code below alow to render properly map after hide/show

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

});

Upvotes: 4

Quasipickle
Quasipickle

Reputation: 4498

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.

Upvotes: 0

Related Questions