Google Maps API v3: Gray Box, no map

Question

As part of a much bigger project, we\'re trying to get a Map on a site using Google\'s Map API v3. I have followed the simplest steps that Google has laid out, I\'ve tried c

Answer 1

I realise this is an old thread, but this may help someone in the future.

Struggled with this for hours, but after discovering that the Google Map is rendered with a grey box overlay if the map is rendered while not being visible, I used a bit of jQuery to make my application only instantiate and render the map if the map is visible, like such:

if ($("#myHomeMapHolder").is(":visible")) {
        if (homemap == null) {

            homemap = new google.maps.Map(document.getElementById("myHomeMapHolder"), myOptions);
            google.maps.event.addListener(homemap, 'click', function (event) {
                placeHomeMarker(event.latLng);
            });
        } else {
            homemap.setCenter(myLatlng);
        }


        if (homemarker == null) {
            homemarker = new google.maps.Marker({
                position: myLatlng,
                map: homemap,
                title: "Home"
            });
        } else {
            homemarker.setPosition(myLatlng);
        }
}

And voila, my map is only rendered if the map holder is visible, so it never renders with a grey box.

For anyone wondering, myHomeMapHolder is a div which the map sits inside.