Добавьте маркер на Google Map с помощью диалога JQuery подтвердите

Question

У меня есть карта Google Map V3. Когда пользователь нажимает на него, появляется всплывающее окно с запросом подтверждения, спрашивающее, хотят ли они добавить маркер. Если они говорят, да, то маркер добавляется. Код как ниже;

РЕДАКТИРОВАТЬ: Стандартная рабочая версия JS на JSFiddle: http://jsfiddle.net/sT8xU/4/

google.maps.event.addListener(map, 'click', function (event) {
   if (event.latLng) {
      var answer = confirm("Add marker?");
         if (answer) {
               addMarker(map, event.latLng);
         }
   }
});

Это отлично работает. Теперь я попытался преобразовать это стандартное предупреждение в диалоговое окно JQuery, как показано ниже; но не в состоянии заставить его работать. Я хотел бы, чтобы функция addMarker вызывалась с параметрами карты и событий, как описано выше в диалоговом окне пользовательского интерфейса JQuery.

Попытка заставить это работать на JSFiddle http://jsfiddle.net/sT8xU/5/

google.maps.event.addListener(map, 'click', function (event) {
   if (event.latLng) {
     $('#divConfirmDialog').html('Add marker?'); $('#divConfirmDialog').dialog('open');
     function showResultsTest(x) {
        addMarker(map, event.latLng);
        alert(x);
     }
   }
});

$('#divConfirmDialog').dialog({
   buttons: {
   "Add": function () {
     x = "1";
     $(this).dialog("close");
     showResultsTest(x);
   },
   "Don't add": function () {
     $(this).dialog("close");
    }
   }
});

Спасибо

Answer 1

Вот, пожалуйста, http://jsfiddle.net/sT8xU/9/

Я добавил var eventlatLng; под вашей глобальной декларацией map var. Затем я устанавливаю это в функции google.maps.event.addListener. Затем вызывается addMarker(map, eventlatLng); в функции кнопки Add Marker.

var map;
var eventlatLng; //new var

$(document).ready(function() {
    //no changes in document.ready
});

google.maps.event.addListener(map, 'click', function(event) {
    if (event.latLng) {
        eventlatLng = event.latLng; // new var set here
        $('#divConfirmDialog').html('Add marker?');
        $('#divConfirmDialog').dialog('open');
    }
});

$('#divConfirmDialog').dialog({
    dialogClass: 'dialogShadow',
    resizable: false,
    height: 100,
    autoOpen: false,
    modal: true,
    buttons: {
        "Add Marker?": function() {
            addMarker(map, eventlatLng); //added call to function with new var
            $(this).dialog("close");
        },
        "Don't Add": function() {
           $(this).dialog("close");
        }
    }
});
// rest of code unchanged