Google Maps and jQuery-UI Dialog box_问答_开发者

开发者 https://www.devze.com 2023-03-10 16:00 出处：网络

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.

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 开发者_如何学JAVAexample 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.

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>