2011-08-15 16 views
2

私はGoogle Map V3マップを持っています。ユーザーがそれをクリックすると、そこにマーカーを追加するかどうかを確認する確認アラートポップアップが表示されます。彼らがイエスと答えた場合、マーカーが追加されます。コードは以下の通りです。JQueryダイアログでマーカーをGoogleマップに追加する

EDIT:JSFiddle上の標準JS作業バージョン: 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ダイアログに変換しようとしました。それを稼働させることはできません。私が欲しいのは、上記のJQueryのUIダイアログからマップとイベントパラメータを使ってaddMarker関数を呼び出すことです。これは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"); 
    } 
    } 
}); 

に取り組んで取得しようとして

ここおかげ

+0

このコードをjsFiddleに入れて、デバッグに役立てることができますか? – plexer

+0

質問に2つのJSFiddleリンクの更新があります:標準JSバージョン:http://jsfiddle.net/sT8xU/4/ JQuery UIバージョン:http://jsfiddle.net/sT8xU/5/ – Sivakanesh

答えて

2

あなたが行く:http://jsfiddle.net/sT8xU/9/

私はmap VARのグローバル宣言下var eventlatLng;を追加しました。私はそれをgoogle.maps.event.addListener関数で設定しました。次に、Add Markerボタン機能でaddMarker(map, eventlatLng);が呼び出されます。

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 
+0

ありがとう、ありがとう。 – Sivakanesh

関連する問題