jQuery没有显示Google Maps

Question

I am going to describe my problem as good as I can. If you go to http://91.123.196.34/Dentalo.Portal/ and click on the one location icon that is located in Sweden. You will get this image

If you click on Information button and then tab menu "Vägbeskrivning" you will get this image.

Goole maps is rendering as I want it to. But if you close the popup and click the same information button again then Google maps is rendering as I want it to like this.

This is is giving me a headache, because I don't know how to solve this.

This is the html code that I have.

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

and the jquery code

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

Hope you understand. I know its a messy description. If it is a bad description delete. I have tried the best I can.

Answer 1

Your problem is the somehow crippled map at startup? This is very common with google maps on hidden elements. You must force it being redrawn by calling

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

Looks like you are using something called "tytabs", which not seems to have events for showing / hiding the tabs.

So I suggest you add this event to function calculateRoute , assuming tab_v4 is the id of the google map tab (Vägbeskrivning) :

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