Google maps not rendering properly within an iframe in ie8 because of hidden div

Question

I am building a widget and using a iframe to insert some Google maps code into a page and I am encountering a problems in ie8 which are not happening in any other browsers (ff, safari, chrome ie9).

Here are the issues:

The map is not rendering correctly when going to the page from a iframe - it seems to shift to the left. This does not happen if you go to the page directly (rather than from a iframe). I've seen this Google Maps does not render correctly in IE8 within iframe nyromodal layer but I'm not really sure how to do this.

My iframe which calls the page is:

 <div class="showGoogleMaps">
                  <iframe frameBorder="0" style="Background-color: Transparent;" allowtransparency="True" width=" 790" height=" 486" scrolling="no" src="http://localhost:7310/widgets/googlemaps/<%= Model.Product.ManufacturersPartNo%>"></iframe>                  

 </div>

Here is my code in full:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Maps.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>

<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
    <%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
    <%= Html.WidgetStyle(Model) %>
    <%= Html.WidgetScripts(Model) %>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <style type="text/css">
        /*reset*/
        *
        {
            margin: -1px;
            padding: 0;
        }

        a
        {
            color: #3a6998;
        }

        img
        {
            border: none !important;
            margin: 0px !important;
        }
        h1
        {
            font-family: 'Open Sans' , sans-serif;
            font-size: 16px;
        }
        h2
        {
            font-family: 'Open Sans' , sans-serif;
            font-size: 13px;
            font-weight: bold;
        }
        h3
        {
            font-family: 'Open Sans' , sans-serif;
            font-size: 12px;
            font-weight: bold;
            color: #3a6998;
        }
        p
        {
            font-family: 'Open Sans' , sans-serif;
            font-size: 11px;
        }
        .divLogo
        {
            float: left;
            height: 70px;
            margin-left: 76px;
            width: 152px;
        }
        .divLocator
        {
            float: left;
            width: 790px;
            height: 486px;
        }
        .topSection
        {
            float: left;
            height: 58px;
            margin-left: 45px;
            margin-top: 87px;
            width: 710px;
        }
        .topSectionLeft
        {
            float: left;
            height: 90px;
            width: 355px;
        }
        .topSectionRight
        {
            float: left;
            height: 90px;
            width: 355px;
        }

        #distanceMiles
        {
            width: 200px;
            margin-left: 5px;
        }
        .divMapsArea
        {
            float: left;
            height: 320px;
            margin-left: 20px;
            width: 748px;
        }
        .googleMaps
        {
            float: left;
            width: 500px;
            height: 325px;
        }

        #gmap_canvas
        {
            height: 292px;
            margin: 10px 10px 10px 22px;
            padding: 4px;
            width: 445px;
            float: left;
            position: absolute;
        }
        .divAddress
        {
            float: left;
            width: 208px;
            height: 320px;
            margin-left: 30px;
        }


        .addressscroll
        {
            height: 260px;
            overflow: hidden;
            padding-top: 20px;
            width: 228px;
        }
        .singleadddress
        {
            padding-left: 10px;
            height: 142px;
            width: 221px;
        }
        #up
        {
            width: 30px;
            height: 20px;
            cursor: pointer;
        }


        #down
        {
            width: 40px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <!-- TradeDoubler site verification 1851666 -->
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="maps">
        <div class="divOuter">
            <div class="divLocator">
                <div class="topSection">
                    <div class="topSectionLeft">
                        <p>
                            Please enter your Postcode &nbsp;
                            <input id="enterPostCode" type="text" /></p>
                    </div>
                    <div class="topSectionRight">
                        <p>
                            Distance from your location &nbsp;
                            <select id="distanceMiles" name="distanceMiles">
                                <option value=""></option>
                                <option value="5">5 miles</option>
                                <option value="10">10 miles</option>
                                <option value="15">15 miles</option>
                                <option value="20">20 miles</option>
                            </select>
                            <input id="enterMiles" type="hidden" /></p>
                    </div>
                </div>
                <div class="upgradeTab">
                </div>
                <div class="divMapsArea">
                    <div class="googleMaps">
                        <!-- Displays the Google Map which was defined in the initialize script above, and defines the map size on the screen -->
                        <div id="gmap_canvas">
                        </div>
                    </div>
                    <div class="divAddress">
                        <div id="up">
                            <img class="upHide" src="http://static.e-talemedia.net/content/images/boschuparrow_button.png"
                                alt="top" /></div>
                        <div class="addressscroll">
                            <ul>
                            </ul>
                        </div>
                        <div id="down">
                            <img class="downHide" src="http://static.e-talemedia.net/content/images/boschdownarrow_button.png"
                                alt="top" /></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Calls javascript necessary for Google Maps API version 2 to function, and specifies the CGA's KEY -->
        <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdFlw_bdW12bnMBM3AfjGfBQa9nlDfvnQNXCWVlyk6VX_22u3VxQLGoWhqJCthTl1MYZFfG0IyTxWUw"></script>
        <!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
        <%--    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB67343qM6ehXlbHHMIXiB62GpnoGHCjQw">
    </script>--%>
        <script type="text/javascript">
               //<![CDATA[



            $(".divAddress").hide();
                    //indicates whether your application is using a sensor, such as a GPS device to determine user's location - we are not
            google.load("maps", "2", { "other_params": "sensor=false" });
                    //Starts a javascript function named initialize which sets the Google Map display parameters, and is called in the html body upon page load
            function initialize() {
                var zoomGrade = 10;

                //Loads and sets up the Google Map - gmap_canvas will be called in the html body to display it
                gmap = new GMap2(document.getElementById("gmap_canvas"));

                //Loads the large zoom/pan control
                //gmap.addControl(new GLargeMapControl3D());
                //Loads the small zoom control
                gmap.addControl(new GSmallMapControl());
                //Enables mouse scroll-wheel zooming
                gmap.enableScrollWheelZoom();
                //Loads the Map, Satellite, Hybrid map-type buttons
                // gmap.addControl(new GMapTypeControl());
                //Adds the Terrain map-type option, which is not a default
                // gmap.addMapType(G_PHYSICAL_MAP);
                //Sets the inital map to load.  Change between PHYSICAL, SATELLITE, HYBRID, NORMAL.  Default is NORMAL which loads the road map view
                //gmap.setMapType(G_PHYSICAL_MAP);
                //Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
                gmap.setCenter(new GLatLng(51.694031, 0.04505), zoomGrade);

                $("#distanceMiles").change(function () {
                    $(".divAddress").hide();
                    $(".addressscroll ul").html('');
                    //clear the old markers if there are any
                    gmap.clearOverlays(); 

                    $("#distanceMiles option:selected").each(function () {

                        var manufacturerId = <%= Model.Manufacturer.Id%>;

                        var postcodeEntered = $("#enterPostCode").val();

                        var milesEntered = $(this).val();

                        if (postcodeEntered != null && milesEntered != null) {

                            var fqdn = "<%: Model.FullyQualifiedDomainName %>";

                            var theUrl ="/Widgets/GetPostcodes/" + manufacturerId + "/" + postcodeEntered + "/" + milesEntered;
                            $.ajax({
                                type: "POST",
                                //contentType: "application/json; charset=utf-8",
                                url: theUrl,
                                data: { 'manufacturerId': manufacturerId, 'postcodeEntered': postcodeEntered, 'milesEntered': milesEntered },
                                dataType: "json",
                                success: function (data) {

                                    for(var i =0;i < data.length-1;i++)
                                    {
                                        var item = data[i];
                                        //the count goes next to the retailer so we know which marker is for which
                                        var count = i + 1;

                                        //to custom the markers i need to use the number we are on (i)
                                        var iconurl = "https://where-to-buy.co/content/images/marker"+ count +".png";

                                        //Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
                                        gmap.setCenter(new GLatLng(item.OriginalLat,item.OriginalLong), item.ZoomLevel);

                                        //trying this for the ie 8 issue


                                        //Close bracket to end the function named initialize !!!very important to not delete this!!!
                                        //javascript that sets up variables that enable the map to draw a custom icon.
                                        var baseIcon = new GIcon();
                                        baseIcon.iconSize = new GSize(32, 32);
                                        baseIcon.shadowSize = new GSize(56, 32);
                                        baseIcon.iconAnchor = new GPoint(16, 32);
                                        baseIcon.infoWindowAnchor = new GPoint(16, 0);
                                        var custom_icon = new GIcon(baseIcon, iconurl, null);
                                        //end of custom icon code
                                        //Adds a marker with window information - i have taken this out add html after point, and unrem addlistener bit to put back
                                        function createMarker(point, icon) {
                                            var marker = new GMarker(point, icon);
//                                                    GEvent.addListener(marker, "click", function () {
//                                                        marker.openInfoWindowHtml(html);
//                                                    });
                                            return marker;
                                        }
                                        var point = new GLatLng(item.StoreLat, item.StoreLong); //here is the long and lat
//                                                var marker = createMarker(point, item.StoreName + " " + item.Address1 + " " + item.TownCity + " " + item.Telephone, custom_icon); //here we can put store name and ink if there is one..
                                        var marker = createMarker(point, custom_icon); //here we can put store name and ink if there is one..
                                        gmap.addOverlay(marker);
                                        //End of add marker code
                                        var showDistance = item.Distance.toFixed(2);
                                        //now i need to create a list that will display on the right hand side inside .addressscroll
                                        $(".addressscroll ul").append("<li><div class=singleadddress><h2>" + count +" " + item.StoreName + "</h2><p>" + item.Address1 + "<br/>" + item.TownCity + " "+ item.Postcode +"<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><h3><a href = \"https://www.google.com/maps?q="+ item.MapsPostcode +"\" target=\"_blank\" >Display Map</a></h3><h3><a href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode +"&daddr=" + item.MapsPostcode +"\" target=\"_blank\" >Display Route</a></h3></div></li> ");

                                        //Creates a directions object and registers a map and DIV to hold the resulting computed directions
//                                                var directionsPanel;
//                                                var directions;
//                                                directionsPanel = document.getElementById("my_directions_div");
//                                                directions = new GDirections(gmap, directionsPanel);
//                                                //Specify the FROM and TO for your directions: postcode to postcode
//                                                directions.load("from: "+ item.OriginalPostcode +", to: "+ item.Postcode + "");


                                    }

                                    $(".divAddress").show();


                                    $(".upHide").hide();
                                    // get the number of .child elements
                                    var totalitems = $(".addressscroll .singleadddress").length;
                                    // get the height of .w6392597
                                    var scrollval = $('.singleadddress').height();
                                    // work out the total height.
                                    var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
                                    $(document).on("click", ".downHide", function () {
                                        var currentscrollval = $('.addressscroll').scrollTop();

                                        $('.addressscroll').scrollTop(scrollval + currentscrollval);

                                        // hide/show buttons
                                        if (currentscrollval == totalheight) {
                                            $(this).hide();
                                        }
                                        else {
                                            $(".upHide").show();

                                        }
                                    }); $(document).on("click", ".upHide", function () {
                                        var currentscrollval = parseInt($('.addressscroll').scrollTop());

                                        $('.addressscroll').scrollTop(currentscrollval - scrollval);

                                        // hide/show buttons
                                        if ((scrollval + currentscrollval) == scrollval) {
                                            $(this).hide();
                                        }
                                        else {
                                            $(".downHide").show();
                                        }
                                    });

                                }
                            });            

                        }
                    });

                });


            }


        //Ends this section of javascript, telling the browser to read XML again
             //]]>
        </script>
        <!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
        <%--  <%= Html.GoogleMapsScriptsReturnPostcodeData(Model)%>--%>
    </div>
</asp:Content>

I am using MVC3.

Any help will be much appreciated I've been on this all day and no idea where to go with it.

Answer 1

After a few frustrating days I've found out what the problem is:

As my iFrame was loading in a hidden div the map was resizing to fit the hidden div and therefore getting confused.

Thedre is quite a bit of documentation on google maps not working properley in hidden divs and how to overcome it.

The way that I went for was not to load the src of the iframe untill the click event which showed the div which was hidden was clicked and this fixed it.

Please see the code below:

 $('.divDealerLocatorStep').hide();
  $('.thisDealerTab').click(function (e) {
                $('.divFirstStep').hide();
                $('.divWheretobuyStep').hide();
                $('.divUpgradeOptionStep').hide();
                $('.divDealerLocatorStep').show();
                //here i need to put something which will resize gmap - instead i am just loading the iframe on click and not before
                var iframe = $("#mapLoad");
                iframe.attr("src", "http://localhost:7310/widgets/googlemaps/<%= Model.Product.ManufacturersPartNo%>"); 
            });

I then converted ny maps to v3 adn decided not to use a iframe but still had a hidden div so to overcome the same problem I had to add the following:

at the bottom of teh google maps code underneath:

google.maps.event.addDomListener(window, 'load', initialize);

I put this:

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

and in the jquery which unhid the hidden dive:

 $(".divDealerLocatorStep").css("display", "block");
                initialize();

and the css:

.divDealerLocatorStep {
            display: none;
        }

Hope this helps others