How to open jQuery UI dialog box on Google Maps click

Question

I am using the following code to show a jQuery UI dialog when the mouse is clicked on the map:

GEvent.addListener(map, "click", clicked);

function clicked(overlay, latlng) {
   $('#dialog').show();
};

Both clicked function and show() function works fine on their own but when I want to open dialog box by clicking on the map it does not. Any ideas?

Daniel Vassallo · Accepted Answer · 2010-03-25 01:28:37Z

1

You may want to check out the following example:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps jQuery UI Demo</title> 
   <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
              type="text/javascript"></script>
   <script src="http://code.jquery.com/jquery-1.4.2.min.js" 
           type="text/javascript"></script>
   <script src="jquery-ui-1.8.custom.min.js" type="text/javascript"></script>

</head> 
<body onunload="GUnload()">
   <div id="map" style="width: 450px; height: 300px"></div> 
   <div id="dialog" title="Basic Dialog" style="display: none;">Dialog</div>

   <script type="text/javascript"> 
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      GEvent.addListener(map, "click", function(overlay, latlng) {
         $('#dialog').dialog();
      });
   </script> 
</body> 
</html>

Screenshot:

alt text http://img517.imageshack.us/img517/643/jquerygoogle.png

edited Mar 25, 2010 at 1:28

answered Mar 25, 2010 at 1:17

Daniel Vassallo

346k72 gold badges514 silver badges447 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vonder Over a year ago

Well, I think that's what I ve got.

Daniel Vassallo Over a year ago

@Vafello: I've tested it as is, and the dialog div shows when the map is clicked. I was going to try it with the full jQuery UI dialog, but I assume it would work. Did you check for errors in Firebug?

Daniel Vassallo Over a year ago

Did you try: $('#dialog').dialog(); instead? ... Check my updated example.

Daniel Vassallo Over a year ago

Check the live preview on jsBin: jsbin.com/apeso/edit. Simply click the Preview button to run it.

Vonder Over a year ago

Now it works, but dialog content when the page is initialised is placed in a div on the site as well, not only in the dialog box.

|

Collectives™ on Stack Overflow

How to open jQuery UI dialog box on Google Maps click

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related