Home/ Questions/Q 5999319
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:32:08+00:00

I’m having an interesting problem with an assignment for my class, we’re supposed to

  • 0

I’m having an interesting problem with an assignment for my class, we’re supposed to have a jQuery-UI Modal Dialog box appear when the user clicks on a Google Map.

In my first example I have the jQuery-UI Modal Dialog box working just fine on the same page as the map.
http://ymartino.userworld.com/map-practice3a.html

However in my second example when I try to integrate it into the map itself the Modal div appears but Dialog box does not.
http://ymartino.userworld.com/map-practice3b.html

Edit
I suspect the issue is that something may simply be not in the proper order.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an example to show how it’s done.

    I’ve kept some of the elements of your attempt (like onload="initialize()" which I would be inclined to replace with $.ready()) for ease of understanding. I’ve also stripped out some functionality that you’ll likely need for your assignment, but that should be easy to restore if you understand your code.

    Hopefully you can grok what’s going on and then apply your understanding to your assignment. Good luck!

    <body onload="initialize()">
<script type="text/javascript">
  function initialize() {
    var location = new google.maps.LatLng(37.437412,-122.15641);
    var myOptions = {
      zoom:13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: location
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        var $dialog = $("#dialog").dialog({
            autoOpen: false,
            title: 'Dialog Title',
            modal: true
        });
        $dialog.dialog('open');
    });
  }
 </script>

<div id="dialog"></div>
<div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
</body>
    • 0