jQuery没有显示谷歌地图

Question

我将尽我所能描述我的问题。 如果您转到http://91.123.196.34/Dentalo.Portal/并单击位于瑞典的一个位置图标。如果你点击信息按钮，然后选项卡菜单“Vägbeskrivning”，你会得到这个形象，你会得到这个图像

。

古尔图被渲染，因为我希望它。但是，如果关闭弹出窗口并再次单击相同的信息按钮，则Google地图正在渲染，因为我希望它能够像这样。

这是让我头疼，因为我不知道如何解决这个问题。

这是我的HTML代码。

<div id="content_v4" class="tabscontent"> 

<!-- Start Google Map --> 
<div id="map_canvas"></div> 

<div class="one-page column bottom-3" id="textdirections"> 

    <div class="info-box top-3" id="direction-steps"> 
    </div>   
</div> 

<div id="directions-panel"></div> 
<!-- End --> 

</div> 

和jQuery代码

function showPopUp(id) { 
//   window.jQuery("#tab_v4").click(); 
//   window.jQuery("#tab_v1").click(); 
//   window.jQuery("#tab_v4").click(); 
      window.jQuery("#priceName").empty(); 
      window.jQuery("#companyPrice").empty(); 
      window.jQuery("#referencePrice").empty(); 
      window.jQuery("#directions-panel").empty(); 
      window.jQuery("#dialog").dialog(); 
      window.jQuery(".ui-dialog").css("width", "+=350"); 
      //begin rest call 
      var window.jQuerycompanyPrice = window.jQuery("#companyPrice"); 
      var window.jQueryreferencePrice = window.jQuery("#referencePrice"); 
      var window.jQuerypriceName = window.jQuery("#priceName"); 
      window.jQuery("#content_v1").empty(); 
      var window.jQuerycontent_v1 = window.jQuery("#content_v1"); 
      //window.jQuery("#map_canvas").css("width", "500"); 
      //window.jQuery("#tab_v1").addClass("active"); 
      window.jQuery.ajax({ 
       type: "GET", 
       cache: false, 
       async: false, 
       url: "http://localhost/Dentalo.Rest.Service/Dentalo.svc/GetPrices/Company/" + id, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        window.jQuery.each(data, function (index, item) { 
         window.jQuerypriceName.append("<li>" + item.PriceType.Name + "</li>"); 
         window.jQuerycompanyPrice.append("<li>" + item.RegularPrice + " kr</li>"); 
         window.jQueryreferencePrice.append("<li>" + item.PriceType.ReferencePrice + " kr</li>"); 
        }); 
       }, 
       error: function (msg, url, line) { 
        //alert('error trapped in error: function(msg, url, line)'); 
        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line); 
       } 
      }); 
      window.jQuery.ajax({ 
       type: "GET", 
       cache: false, 
       async: false, 
       url: "http://localhost/Dentalo.Rest.Service/Dentalo.svc/Company/" + id, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        calculateRoute(window.jQuery("#latitude").val() + "," + window.jQuery("#longitude").val(), data.Address + ", " + data.State.County.Name); 
        window.jQuerycontent_v1.append("<h4>" + data.Name + "</h4>" + 
             "<h4>Öppettider</h4><br />" + 
             "<i class='icon-time s-20 color'></i> <br />" + data.OpeningHours.replace(/\r\n|\n|\r/g, '<br />') + 
             "<br /><br /><h4>Hemsida</h4> <a href='" + data.Url + "'>" + data.Url + "</a><br />"); 
        window.jQuery.each(data, function (index, item) { 
         window.jQuerypriceName.append("<li>" + item.PriceType.Name + "</li>"); 
         window.jQuerycompanyPrice.append("<li>" + item.RegularPrice + " kr</li>"); 
         window.jQueryreferencePrice.append("<li>" + item.PriceType.ReferencePrice + " kr</li>"); 
        }); 
       }, 
       error: function (msg, url, line) { 
        //alert('error trapped in error: function(msg, url, line)'); 
        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line); 
       } 
      }); 
     } 
     function calculateRoute(from, to) { 
      // Center initialized to Naples, Italy 
//   var myOptions = { 
//    zoom: 10, 
//    center: new google.maps.LatLng(40.84, 14.25), 
//    mapTypeId: google.maps.MapTypeId.ROADMAP 
//   }; 
      // Draw the map 
      var mapObject = new google.maps.Map(document.getElementById("map_canvas")); 
      var directionsService = new google.maps.DirectionsService(); 
      var directionsRequest = { 
       origin: from, 
       destination: to, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING, 
       unitSystem: google.maps.UnitSystem.METRIC 
      }; 
//    directionsDisplay = new google.maps.DirectionsRenderer(); 
//    directionsDisplay.setMap(map); 
//    directionsDisplay.setPanel(document.getElementById('directions-panel')); 

      directionsService.route(
       directionsRequest, 
       function (response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 

         // Start/Finish icons 
         var icons = { 
          start: new google.maps.MarkerImage(
          // URL 
          'http://a01c00487.ad.sogeti.se/dentalo.portal/assets/images/img/ui/imagefiles-location_map_pin_home_green.png', 
          // (width,height) 
          new google.maps.Size(64, 64), 
          // The origin point (x,y) 
          new google.maps.Point(0, 0), 
          // The anchor point (x,y) 
          new google.maps.Point(22, 32) 
          ), 
          end: new google.maps.MarkerImage(
          // URL 
          'http://a01c00487.ad.sogeti.se/dentalo.portal/assets/images/img/ui/marker_location_blue.png', 
          // (width,height) 
          new google.maps.Size(46, 50), 
          // The origin point (x,y) 
          new google.maps.Point(0, 0), 
          // The anchor point (x,y) 
          new google.maps.Point(21, 53) 
          ) 
         }; 

         var directionsDisplay = new google.maps.DirectionsRenderer({ 
          map: mapObject, 
          directions: response, 
          suppressMarkers: true 
         }); 
         var leg = response.routes[0].legs[0]; 
         directionsDisplay.setMap(mapObject); 
         var d = response.routes[0].legs[0]; 
         if (d != null) { 
          var h = ""; 
          for (var c = 0, g; g = d.steps[c]; ++c) { 
           var b = ""; 
           if (g.transit != null) { 
            b = ", <strong>avstigning:</strong> " + g.transit.arrival_stop.name; 
           } 
           h += "<div class='twelve columns bottom-1 float-left'>" + g.instructions + b + "</div><div class='four columns bottom-1 float-right'><strong>" + g.distance.text + ", " + g.duration.text + "</strong></div>"; 
          } 
          //alert(h); 
          window.jQuery("#direction-steps").html(h); 
          window.jQuery("#textdirections").show(); 
         } 
         directionsDisplay.suppressMarkers = true; 
         //directionsDisplay.setPanel(document.getElementById('directions-panel')); 
         makeMarker(leg.start_location, mapObject, icons.start, "title"); 
         makeMarker(leg.end_location, mapObject, icons.end, 'title'); 
        } 
        else 
        { 
         window.jQuery("#error").append("Unable to retrieve your route<br />"); 
        } 
       } 
      ); 
     } 
     function makeMarker(position, map, icon, title) { 
      new google.maps.Marker({ 
       position: position, 
       map: map, 
       icon: icon, 
       title: title 
      }); 
     } 

希望你能理解。我知道它是一个混乱的描述。如果它是一个不好的描述删除。我尽我所能尽力了。

Answer 1

你的问题是在启动时莫名其妙的地图？谷歌地图上隐藏的元素非常常见。你必须强迫它被调用

google.maps.event.trigger(mapObject, 'resize'); 

看起来你正在使用一种叫“tytabs”，这不似乎有显示/隐藏标签事件重新绘制。

所以我建议你这个事件添加到function calculateRoute，假设tab_v4是谷歌地图选项卡（Vägbeskrivning）的id：

$("#tab_v4").click(function() { 
    google.maps.event.trigger(mapObject, 'resize'); 
});