Javascript google地图标记上的jquery ui对话框_Javascript_Jquery_Google Maps

Javascript google地图标记上的jquery ui对话框

javascript jquery google-maps

Javascript google地图标记上的jquery ui对话框,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我有一个GoogleMaps，它可以绘制多个标记，我需要单击标记事件来显示弹出窗口，下面的代码使用info窗口来显示弹出窗口，但我想使用Jquery ui弹出对话框而不是info窗口。弹出窗口必须显示样式属性显示为“无”的div中的信息。有人可以帮助该div enter code here <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() {

我有一个GoogleMaps，它可以绘制多个标记，我需要单击标记事件来显示弹出窗口，下面的代码使用info窗口来显示弹出窗口，但我想使用Jquery ui弹出对话框而不是info窗口。弹出窗口必须显示样式属性显示为“无”的div中的信息。有人可以帮助该div

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>

在此处输入代码
var myCenter=newgoogle.maps.LatLng（51.508742，-0.120850）；
函数初始化（）
{
var mapProp={
中心：迈森特，
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var marker=new google.maps.marker({
职位：迈森特，
});
marker.setMap（map）；
var infowindow=new google.maps.infowindow({
内容：“你好，世界！”
});
google.maps.event.addListener（标记'click'，函数（）{
$（“#mypopup”）.dialog（）；
//信息窗口。打开（地图、标记）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

试试这个：

JS:

HTML:

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);

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

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