Question

I have a Google Map V3 map. When a user clicks on it an confirmation alert popup asking them if they want to add the marker there. If they say yes then marker is added. Code is as below;

EDIT: Standard JS working version on 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);
         }
   }
});

This works fine. I have now tried to convert this standard alert to a JQuery dialog as below; but not able to get it work. What I would like is for the addMarker function to be called with the map and event parameters as above from the JQuery UI dialog.

Trying to get this working on 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");
    }
   }
});

Thanks

Answer 1

Here you go: http://jsfiddle.net/sT8xU/9/

I added var eventlatLng; under your global declaration of the map var. I then set that in the google.maps.event.addListener function. Then addMarker(map, eventlatLng); is called in the Add Marker button function.

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