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 copying code outright from other working maps. But no matter what I do, all we get is a gray box and no map.

Using Firebug, I can see the information trying to populate the map, but it is simply not displaying. I've tried jquery, jquery libraries specifically made for google maps, nothing is working. I have been up and down the internet and all through google's api help files. Plus, the problem is not local as I've uploaded the file to multiple servers and tested it on multiple browsers and computers. Nothing is working.

At this point it's got to be something stupid that I'm overlooking. Here's my code.

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            //zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);

        function createMarker(point, text, title) 
        {
          var marker =
          new GMarker(point,{title:title});
          return marker;
        }
    }

</script>
  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>

Miro Hudak · Accepted Answer · 2019-01-22T13:32:49.653

44

This works for me. You simply have to set zoom parameter:

UPDATE (by @user2652379): You need to set BOTH zoom and center options. Just zoom does not work.

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            //imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);
       // map.addControl(new GSmallMapControl());
       // map.addControl(new GMapTypeControl());
       // map.addMapType(ROADMAP);
       // map.setCenter(
       // new GLatLng(37.4419, -122.1419), 13);
    }

</script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div>
</body>
</html>

edited Jan 22 '19 at 13:32

answered Jul 31 '12 at 22:15

Miro Hudak

2,155
2
21
29

Yes! That did it! This doesn't really reflect the problems we've been having with this thing. You can see that we had a zoom in there originally but we took so much out of it just to get it to display. By the time we got it populating, all we had to do was put the stupid zoom back on. Oy! Thanks for the help though, I don't know if we would've gotten to that for another couple of days after the struggle we've been having. – Biggest Jul 31 '12 at 22:25
Ok, then I misunderstood you... What exactly is the question? – Miro Hudak Jul 31 '12 at 22:27
Sorry, I wasn't telling you that you were wrong. That was the answer to the problem at this point. I was just upset that we had worked out so much of it but missed this mundane detail. Cause we did a whole round with API keys and all kinds of nonsense getting to this point where it just wasn't working. Now we have to figure out how to marker it from addresses within a database. If you happen to have any tips on that, please let me know? – Biggest Aug 01 '12 at 13:42
@Biggest ah, i see :) as for placing markers from the addresses in database, that's pretty straightforward, yet not so simple... i usually use geocoder api in google maps to obtain latlng (which you need to properly place marker) -- point is, google does not like crawling its database so if you have a huge number of addresses, you need to do it in batches or delegate clients to do the crawling for you on display and then cache... or use some other geolocating services... – Miro Hudak Aug 01 '12 at 19:35
Well we've got a big portion of it working now. But it's slow because it has to do all of the queries. We have a database setup, as I said, and we'll eventually store the lat & long into the database and that's what will populate the map. But we'll also have this running for any new addresses that we don't have coordinates for. But then once it gets them that first time, it will store them into the database. You can see the progress so far in the link above. – Biggest Aug 01 '12 at 21:08
@Biggest good luck :) it requires some caching and optimizations and so on, but you are on a good track... :) – Miro Hudak Aug 01 '12 at 21:12
Thankyou saved my skin! – Brent Mar 09 '16 at 10:13
If it's of any use, the map appeared grey for me because I used "centre" instead of "center". Ruddy Americans mutating our language. :P – Adambean Dec 08 '17 at 11:21
2

For future readers and me: need to set BOTH `zoom` and `center` options. Just `zoom` not working – user2652379 Jan 09 '19 at 06:26

score 13 · Answer 2 · answered Jul 12 '16 at 15:17

13

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

answered Jul 12 '16 at 15:17

Oleg

7,070
4
47
49

3

Could you please elaborate this answer, i think it is my issue.. I have map in a jquery *accordian* – Jamshaid K. Sep 22 '16 at 15:07
6

@CodeIt A year late, but, when visible, a fake rezise might work: `google.maps.event.trigger(map, "resize");` – Pragabhava Sep 24 '17 at 18:50
It is very late @Pragabhava, still it maybe helpful for others. I was able to solve it by placing a click event on the jquery Accordion element. so when the user clicks the accordion the map is rendered again. – Jamshaid K. Sep 26 '17 at 09:40

score 11 · Answer 3 · answered Apr 04 '16 at 14:21

11

I had the same issue and came across a lot of topics on stackoverflow but none of them had the working solution for me. I eventually found out it was caused to a line of css I had added.

All the elements in the map inherited a

overflow:hidden;

By adding the following line to my CSS it was fixed

#map * {
    overflow:visible;
}

answered Apr 04 '16 at 14:21

Expertees

111
1
4

It would have taken me hours to figure this out. Thank you!! – Micha Schwab Feb 10 '17 at 18:03

score 6 · Answer 4 · answered Oct 22 '15 at 13:17

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.

score 5 · Answer 5 · answered Jul 15 '17 at 19:47

5

Also beware of having an invalid latitude or longitude value for the map center or your markers. For example, this fiddle shows the Grey Map Of Death because the map center is at latitude 131.044 which is invalid (not from +90:-90).

function initMap() {
  var uluru = {lat: 131.044, lng: -25.363};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

answered Jul 15 '17 at 19:47

MadeOfAir

2,933
5
31
39

I had a similar problem. I get a long/lat array and i select the first item of the array for initial marker which was empty. Without valid lat/long google map only show grey box. – Kevin Dec 06 '17 at 11:17

Geoffrey Kimani · Answer 6 · 2019-11-06T09:46:50.063

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

Jamshaid K. · Answer 7 · 2016-09-22T19:34:55.113

I had the same issue. i was using google maps in Jquery Accordion and when i expand the div the map only consisted a grayed area. I was able to solve this issue by triggering a click event on the specified accordion heading and setting the map container to visible.

Script:

<script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>

ASPX File/Html Markup:

<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>

Had a similar issue with custom accordion-like control. Having the initial code abort if it is not visible yet (`offsetParent` will be set to `null` if `display: none` is set on the element or a parent), and having the method run again when the accordion is opened fixed the issue. — Nidonocu, Jul 02 '21 at 18:33

score 2 · Answer 8 · answered Jun 05 '19 at 14:13

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.

score 1 · Answer 9 · answered Mar 03 '17 at 16:07

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.

answered Mar 03 '17 at 16:07

dgilperez

10,716
8
68
96

score 1 · Answer 10 · answered Mar 24 '17 at 13:14

1

I had this issue with a site I'm working on too. We're doing some things to all <img> tags for responsiveness. This fix is working for us for the map:

img {max-width: initial !important;}

answered Mar 24 '17 at 13:14

Barry Kaufman

11
2

i love you! in my case this was in interaction with twitter bootstrap! – FalcoB Jan 15 '18 at 16:10

score 1 · Answer 11 · answered Dec 12 '17 at 14:54

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!

score 0 · Answer 12 · answered Jul 25 '17 at 09:10

This may not be the case for everyone, but maybe it can help someone.

I was creating markers in my map from data attributes placed on the map element like this: data-1-lat="2" data-1-lon="3" data-text="foo". I was putting them in an array based on the order they were placed in the data attributes.

The problem is that IE and Edge (for some mad reason) invert the order of the data attributes in the HTML tag, therefore I wasn't able to correctly extract them from the data attributes.

score 0 · Answer 13 · answered Oct 21 '20 at 01:02

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

score 0 · Answer 14 · answered Mar 09 '23 at 13:38

0

In my case the reason was an invalid mapType which was set to "OSM" and this stopped working for some reasons.

answered Mar 09 '23 at 13:38

Elmar Höfinghoff

51
2

score -3 · Answer 15 · answered Oct 30 '17 at 14:39

-3

In my case (version is 3.30 when submitting this), it was because the div id MUST be "map"

<div id="map"></div>
...
document.getElementById("map")

answered Oct 30 '17 at 14:39

Igor

1,253
1
25
34

Google Maps API v3: Gray Box, no map

15 Answers15

Linked

Related