谷歌地圖標記上的jquery ui對話框

我有一個Google地圖，繪製多個標記我需要點擊標記的事件來顯示彈出窗口，下面的代碼用信息窗口做，但我想用Jquery的ui pop對話框而不是信息窗口。彈出窗口必須顯示具有樣式屬性的div的信息顯示爲無。有人可以幫助我解決這個問題。谷歌地圖標記上的jquery ui對話框

enter code here 
<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

    function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var marker=new google.maps.Marker({ 
    position:myCenter, 
    }); 

    marker.setMap(map); 

    var infowindow = new google.maps.InfoWindow({ 
    content:"Hello World!" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    $("#mypopup").dialog(); 
    //infowindow.open(map,marker); 
    }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 

    <body> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 

    <div id="mypopup" style="display:none"> <div> 


    </body> 
    </html>

來源

2014-06-16 Alfred Alfizo Mosima

試試這個：http://jsfiddle.net/lotusgodkk/x8dSP/3525/

JS：

var myCenter = new google.maps.LatLng(51.508742, -0.120850); 

function initialize() { 
    var mapProp = { 
     center: myCenter, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

    var marker = new google.maps.Marker({ 
     position: myCenter, 
    }); 

    marker.setMap(map); 

    var infowindow = new google.maps.InfoWindow({ 
     content: "Hello World!" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     console.log('clicked') 
     //$("#mypopup").dialog(); 
     var dialog = $("#mypopup").dialog({ 
      buttons: { 
       "Yes": function() { 
        alert('you chose yes'); 
       }, 
        "No": function() { 
        alert('you chose no'); 
       }, 
        "Cancel": function() { 
        dialog.dialog('close'); 
       } 
      } 
     }); 
     //infowindow.open(map,marker); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

HTML：

<div id="googleMap"></div> 
<div id="mypopup">Hello</div>

CSS：

#googleMap { 
    height: 380px; 
    width: 500px; 
} 
#mypopup { 
    display:none; 
}

來源

2014-06-16 07:16:07

謝謝你這麼好的作品 –

小提琴的鏈接現在壞了，請更新 – ANinJa

谷歌地圖標記上的jquery ui對話框

回答

相關問題