Question

I began to use Google Map API recently and I tried the hello world sample in my own webpage. The only difference of my code from the original one is I display the map element in javascript code like this:

    function showMap () {
        container = document.getElementById("id_container");
        container.innerHTML = "<div id=\"map_canvas\"><\/div>";
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }

And in the external css file, I defined the width and height by fixed values for #map_canvas.

But I didn’t get the expected result. The map showed for about 1 second and became all white (see the image below). When I zoom the map, I can see it flashing. I have searched on Google but I didn’t get any solution and I don’t even know what the problem is. Has anyone encountered the same problem before?

Answer 1

After several days’ trying, I know what’s happening —

I set the background attribute of all divs to be white. Though I reset the background of the map div to be “none”, it doesn’t work. The only solution is to avoid any definitions that would possibly give it a not “none” background, like “div {background-color: white;}”.

However, feel free to set the background color of its parent tags.