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

In my case, someone had dropped this little prize in some responsive.css file:

img {
  max-width: 100% !important;
}

Removed that and all is fine now.

Answer 2

I would like to add a quick comment to this since I had the same problem with the zoom parameter set. I found out that the problem was my theme's css. In my base theme I had the following CSS:

img, embed, object, video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

This messed up the rendering of the map and after I removed it, my map renders just fine.

Answer 3

None of the existing answers helped me because my problem was that Apollo was adding extra properties ("__typename" fields) to my MapOptions object.

In other words, the JSON looked like this:

mapOptions {"__typename":"MapOptions","center":{"__typename":"GeoCoordinates","lat":33.953056,"lng":-83.9925},"zoom":10}

Once I realized that those extra properties were problematic, this is how I solved it (using TypeScript):

function getCleanedMapOptions(mapOptionsGql: google.maps.MapOptions): google.maps.MapOptions {
  const mapOptions = { ...mapOptionsGql };
  const lat: number = mapOptions.center.lat as number;
  const lng: number = mapOptions.center.lng as number;
  const mapOptionsCleaned = {
    center: new google.maps.LatLng({ lat, lng }),
    zoom: mapOptions.zoom,
  };
  return mapOptionsCleaned;
}

export function createMap(mapOptions: google.maps.MapOptions): google.maps.Map {
  const mapOptionsCleaned = getCleanedMapOptions(mapOptions);
  const map = new google.maps.Map(document.getElementById('map') as HTMLElement, mapOptionsCleaned);
  return map;
}

Answer 4

For those who might be stuck regardless of the nice solutions provided here, try setting the height and width of your container directly in the html markup instead of a stylesheet ie.

<div id="map-container" style="width: 100%; height: 300px;"></div>

happy mapping!

Answer 5

Another case is when map container is hidden at the moment you initialize the map. E.g. you are doing it inside bootstrap show.bs.modal event, instead of shown.bs.modal

Answer 6

In my case, I was working on a map with vue and a modal in the iview library; and during the first render it worked, but any other render displayed the grey screen of death. I fixed the issue by setting a timeout function to display the map after 50 ms to give the modal enough time to render and be visible.

//Time out is crucial for the map to load when opened with vue
setTimeout(() => {
   this.showMap(id);
}, 50);

The above example was an earlier fix and a quick hack, i have realized all you need to do is wait for the next tick, on vue you can achieve this by

async mounted(){
   await this.$nextTick()
   this.showMap(id)
}

or if you are not comfortable with async await you can try the callback option

mounted(){
   Vue.nextTick(function () {
     this.showMap(id)
   })
}