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

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;
}