Google Maps и диалоговое окно jQuery-UI - PullRequest
Новая
       26

Google Maps и диалоговое окно jQuery-UI

0 голосов
/ 07 июня 2011

У меня интересная проблема с заданием для моего класса, у нас должно появиться модальное диалоговое окно jQuery-UI, когда пользователь нажимает на карту Google.

В моем первом примереУ меня есть модальное диалоговое окно jQuery-UI, прекрасно работающее на той же странице, что и карта.http://ymartino.userworld.com/map-practice3a.html

Однако во втором примере, когда я пытаюсь интегрировать его в саму карту, появляется модальный div, а диалоговое окно - нет.http://ymartino.userworld.com/map-practice3b.html

Редактировать Я подозреваю, что проблема в том, что что-то может быть просто не в правильном порядке.

1 Ответ

1 голос
/ 07 июня 2011

Вот пример, чтобы показать, как это делается.

Я сохранил некоторые элементы вашей попытки (например, onload="initialize()", которые я склонен заменить на $.ready()) для простоты понимания. Я также исключил некоторые функциональные возможности, которые вам, вероятно, понадобятся для вашего назначения, но их будет легко восстановить, если вы понимаете свой код.

Надеюсь, вы сможете понять, что происходит, а затем применить свое понимание к своему заданию. Удачи! 

<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>
...