how do i fix google maps api v3 from showing up as a gray box?

when i search for nearby locations on the site i am workign on the results show up in a list开发者_StackOverflow中文版 but the map area is just grayed out sometimes it comes back but then goes away.

any help would be greatly appreciated

---

This is a response to your question on the first answer. His idea is right that you need to initialize it with a location before anything can be visible. Also please note that this is a question about V3, the first answer addresses the syntax of V2. Please try the code below using the same idea as the v2 post.

Set the center value in the map options with your initial location. You can also adjust the zoom here.

var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(latitude, longitude)
    };
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

---

The timing of initializing is important. Is the map visible at the moment the page loads, or does it pop up/fade in/(whatever that changes the state from invisible to visible)?

If the map is hidden at the moment of initializing, the map will be grey.

---

In v3, check your Lat and Lng are OK and are not "undefined".

console.log(results[0].geometry.location.k);
console.log(results[0].geometry.location.D);

var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(
        results[0].geometry.location.k, 
        results[0].geometry.location.D
    )
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

---

Based on my experience working with google maps, sometimes the gray patches appear when there is no available map data at the location you are currently previewing (esp. when the zoom factor is high), or when you internet connection is slow, such that map data takes long to load / fails!

But other factors could also be a cause -- maybe.

When you initialize your map, say for example:

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

the seconds parameter to the map.setCenter is the zoom factor - in this case 13.

you can also set a new zoom level for the map like this:

map.setZoom(5);

Read more here...