CODEWITHSUNDEEP
google-maps
NibblyPig
NibblyPig

Reputation: 52932

embedded google map is just gray

I embedded a google map on my page. In IE8, part of the map renders but the rest of the map is gray. In firefox, the entire map is just gray. My code is this:

<script type="text/javascript">

             function initialize() {
                 if (GBrowserIsCompatible()) {
                     var map = new GMap2(document.getElementById("map_canvas"));
                     map.setCenter(new GLatLng(37.4419, -122.1419), 13);
                     map.setUIToDefault();
                 }
             }

             window.setTimeout(function() {
                 initialize();
             }, 750);

             window.onunload = GUnload;
</script>

<div id='map_canvas' style="float:left; width:481px; height:450px; border-style:solid; border-width:2px; border-left:none; border-color:#5793C9">

The google example code I copied this from uses the <body onload> and unload, but I don't have access to these since my body is defined in the masterpage. I guess this is probably the reason. How can I fix it?

edit to add: my test.html is doing the same thing. The entire contents of test.html are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEYABCDE"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

Upvotes: 1

Views: 3067

Answers (3)

Kim Ras
Kim Ras

Reputation: 972

If you have this problem on Firefox, you can set a img CSS (cascading style sheets) for your map container like this:

.gmap img {
  max-width: none;
}

Apparently is is a "undocumented feature on FF"

I found it here this post: https://drupal.org/node/1298800

I am not using Drupal but it fixed my problem on Firefox..

Regards Kim

Upvotes: 0

Victor Pudeyev
Victor Pudeyev

Reputation: 4539

Make sure your default values are reasonable. Are you centering the map on an existing point? Looks like you are... Are you giving it acceptable zoom level? Does zoom level of 13 exist?

Upvotes: 0

Patonza
Patonza

Reputation: 6757

750 milliseconds may not be enough for the DOM to load completly.

Instead of:

window.setTimeout(function() {
  initialize();
}, 750);

try using:

window.onload = initialize;

Upvotes: 1

Related Questions