Preload a Google Maps overlay

Question

I'm trying to use a Google Map as a background, with a fixed overlay. Have a look-see.

You can see the problem — whilst it's loading, the text is unreadable. The overlay is loaded by Google's JS. How can I hide the map until the overlay has loaded? (Or a better solution?)

Answer 1

I don't see any way in the v2 Api to either know when the overlay has loaded, or hide the map until it finishes the overlay.

The load() event fires before the overlays have finished loading. I notice the overlay is quite large at 684KB. A smaller overlay loads quicker.

You might also consider just putting a background image or something behind the contact us text which is being obscured (granted for only 5 seconds).

Answer 2

Actually, you can use JavaScript to make sure the map only displays when the overlay is loaded:

document.observe('dom:loaded', function()
{
  if (GBrowserIsCompatible()) {
    var overlaySrc = 'img/contact_map_overlay.png';
    var preloadOverlay = new Image();

    preloadOverlay.onload = function() {
      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(-33.82568, 151.2180955505371), 14, G_PHYSICAL_MAP);
      var mapTypeControl = new GMapTypeControl();
      var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(80, 250));
      map.addControl(new GSmallMapControl(), topRight);
      var mapTarget = new GScreenOverlay(overlaySrc, new GScreenPoint(0.0, 0.0, 'fraction', 'fraction'), // screenXY
      new GScreenPoint(0, 0),                                                                                               // overlayXY
      new GScreenSize(1, 1, 'fraction', 'fraction')                                                                         // size on screen
      );
      map.addOverlay(mapTarget);

      var pin = new GIcon(G_DEFAULT_ICON);
      pin.image = "img/pin.png";
      pin.shadow = "no-shadow";
      pin.iconSize = new GSize(34, 43);
      markerOptions = {
        icon: pin
      };

      var marker = new GMarker(new GLatLng(-33.82568, 151.240635), markerOptions);
      map.addOverlay(marker);
    }

    preloadOverlay.src = overlaySrc;
  }
});

Google simply displays the image from the server, so having it loaded into the cache before displaying the map will solve your problem.