Google maps 在对话框中加载地图时，Google地图标记不可见

我试图在点击一个按钮后在对话框中加载谷歌地图。除了马克笔，所有东西都在装货。请帮助我我的代码有什么错误。如何显示标记。当我不使用对话框，然后它的工作良好

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
var directionsDisplay;
var directionsService;
var map;
var stepDisplay;
var image ;
var geocoder;
var latitude;

    $(function () {
    $("#btnShow").click(function () {
        $("#dialog").dialog({
            modal: true,
            title: "Google Map",
            width: 600,
            hright: 450,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
            var mapOptions = {
                    center: new google.maps.LatLng(19.0606917, 72.83624970000005),
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            directionsService = new google.maps.DirectionsService();
            geocoder = new google.maps.Geocoder();
            directionsDisplay = new google.maps.DirectionsRenderer();

                var map = new google.maps.Map($("#dvMap")[0], mapOptions);
                directionsDisplay.setMap(map);
              // Instantiate an info window to hold step text.
              stepDisplay = new google.maps.InfoWindow();
              //supress default markers and set route color
              directionsDisplay.setOptions( { suppressMarkers: true,
              polylineOptions: {
                strokeWeight: 5,
                strokeOpacity: 1,
                strokeColor:  'green' 
                }
            } ); 
      calcRoute();
            }
        });
    });
    });

var cList= [];
function showOnMap(){

         cList = [];

                 var coordinates = [];
                 coordinates.push("ORG");
                 coordinates.push("18.9542149");
                 coordinates.push("72.81203529999993");
                 coordinates.push("hello");
                 coordinates.push("not");
                 cList.push(coordinates);
                 coordinates = [];
                 coordinates.push("DEST");
                 coordinates.push("19.2147067");
                 coordinates.push("72.91062020000004");
                 coordinates.push("hello");
                 coordinates.push("not");
                 cList.push(coordinates);



}
function calcRoute() {

      var start;
      var end;
      var temp;
      var waypts = [];
      for(var i =0;i<cList.length;i++){
      var coord = cList[i];
          if(coord[0] == "ORG"){
            start = coord[1] +", "+coord[2];
            alert("start: "+start);
            showSteps(coord[1] , coord[2], coord[3]);


          }else if(coord[0]== "DEST"){
            end = coord[1] +", "+coord[2];
            alert("end: "+end);
            showSteps(coord[1] , coord[2],coord[3]);

          }else if(coord[0]== "WAYPOINT"){
            $("#comments").text("WAYPOINT: ");
            temp = coord[1] +", "+coord[2];
            //alert("way: "+temp);
            waypts.push({
              location:temp,
              stopover:true});
              var text = "reached till this stop ";
              showSteps(coord[1] , coord[2],text);
          }
      }



  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };


  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);


    }
  });
}
var marker;
function showSteps(lat, lon, text) {
      //alert("showSteps:"+image+" text"+text);
      // For each step, place a marker, and add the text to the marker's
      // info window. Also attach the marker to an array so we
      // can keep track of it and remove it when calculating new
      // routes.

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lon),
          map: map
        });
        attachInstructionText(marker, text);

    }
    function attachInstructionText(marker, text) {
      google.maps.event.addListener(marker, 'click', function() {
        // Open an info window when the marker is clicked on,
        // containing the text of the step.
        if(text == ""){
            text = "not reached";
        }
        stepDisplay.setContent(text);
        stepDisplay.open(map, marker);
      });
    }
    </script>

    <input id = "btnShow" type="button" value="Show Maps" class="fMap" onclick="showOnMap()" />
    <div id="dialog" style="display: none">
<div id="dvMap" style="height: 380px; width: 580px;">
</div>
</div>

var方向显示；
var定向服务；
var映射；
var步进显示；
var图像；
var地理编码器；
纬度；
$（函数（）{
$（“#btnShow”）。单击（函数（）{
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“谷歌地图”，
宽度：600，
人权：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
变量映射选项={
中心：新google.maps.LatLng（19.0606917,72.8362497000005），
缩放：18，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
directionsService=new google.maps.directionsService（）；
geocoder=新的google.maps.geocoder（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
var map=new google.maps.map（$（“#dvMap”）[0]，mapOptions）；
方向显示.setMap（地图）；
//实例化一个信息窗口以保存步骤文本。
stepDisplay=new google.maps.InfoWindow（）；
//禁用默认标记并设置管线颜色
directionsDisplay.setOptions（{suppressMarkers:true，
多段线选项：{
冲程重量：5，
频闪不透明度：1，
strokeColor:“绿色”
}
} ); 
calcRoute（）；
}
});
});
});
var-cList=[]；
函数shownmap（）{
cList=[]；
变量坐标=[]；
坐标推送（“组织”）；
坐标。推（“18.9542149”）；
坐标推（“72.812035299993”）；
坐标。推（“你好”）；
坐标。推（“非”）；
cList.push（坐标）；
坐标=[]；
坐标推送（“DEST”）；
坐标推（“19.2147067”）；
坐标推送（“72.9106200000004”）；
坐标。推（“你好”）；
坐标。推（“非”）；
cList.push（坐标）；
}
函数calcRoute（）{
var启动；
var端；
无功温度；
var-waypts=[]；
对于（var i=0；i您的
map
变量是对话框的
open
函数的本地变量：

  open: function() {
    var mapOptions = {
      center: new google.maps.LatLng(19.0606917, 72.83624970000005),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#dvMap")[0], mapOptions);

从实例化
google.maps.Map
对象的行的开头删除“var”


代码片段：


var方向显示；
var定向服务；
var映射；
var步进显示；
var图像；
var地理编码器；
纬度；
$（函数（）{
$（“#btnShow”）。单击（函数（）{
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“谷歌地图”，
宽度：600，
人权：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
变量映射选项={
中心：新google.maps.LatLng（19.0606917,72.8362497000005），
缩放：18，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
directionsService=new google.maps.directionsService（）；
geocoder=新的google.maps.geocoder（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
map=new google.maps.map（$（“#dvMap”）[0]，mapOptions）；
方向显示.setMap（地图）；
//实例化一个信息窗口以保存步骤文本。
stepDisplay=new google.maps.InfoWindow（）；
//禁用默认标记并设置管线颜色
directionsDisplay.setOptions({
对,，
多段线选项：{
冲程重量：5，
频闪不透明度：1，
strokeColor:“绿色”
}
});
calcRoute（）；
}
});
});
});
var-cList=[]；
函数shownmap（）{
cList=[]；
变量坐标=[]；
坐标推送（“组织”）；
坐标。推（“18.9542149”）；
坐标推（“72.812035299993”）；
坐标。推（“你好”）；
坐标。推（“非”）；
cList.push（坐标）；
坐标=[]；
坐标推送（“DEST”）；
坐标推（“19.2147067”）；
坐标推送（“72.9106200000004”）；
坐标。推（“你好”）；
坐标。推（“非”）；
cList.push（坐标）；
}
函数calcRoute（）{
var启动；
var端；
无功温度；
var-waypts=[]；
对于（变量i=0；i