将infoBox替换为jquery对话框模式窗口

时间:2013-09-03 15:30:39

标签: javascript jquery css jquery-ui jquery-ui-dialog

这里我有一张地图,标记和信息框。

现在我想用jquery dialog()和模态窗口改变信息框... 我怎么能这样做?

这是我的信息框代码

 google.maps.event.addListener(marker,'click',function(){

        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<div class="m_tooltip"><h5>'+place.name+'</h5><p>'+place.formatted_address+'</p>';
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            if (!!place.photos) contentStr += '<img src='+place.photos[0].getUrl({ 'maxWidth': 300, 'maxHeight': 300 })+'></img>';
            contentStr += '<br>'+place.types+'</p>';


            //contentStr += '<h5">'+place.reviews[0].text+'</h5></div>';
            ib.setContent(contentStr);
            ib.open(map,marker);

          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            ib.setContent(contentStr);
            ib.open(map,marker);
          }
        });

    });

gmarkers.push(marker);

现在我想用对话框改变它......

我尝试:

$(function() {
    $( ".m_tooltip" ).dialog({
      resizable: false,
      height:140,
      modal: true
    });
  });

但这不起作用......请帮忙

1 个答案:

答案 0 :(得分:0)

google.maps.event.addListener(marker,'click',function(){
      service.getDetails(request, function(place, status) {
      var content= '<h1>'+place.name+'</h1>';//and add all what you want
      $(content).dialog();
      });
      });