2


3

Googleマップオーバーレイをプリロードする

Googleマップを背景として使用し、オーバーレイを固定しようとしています。 http://clients.madebycanvas.com/anahata/blueprints/map.html [ご覧ください]。

あなたは問題を見ることができます—それがロードしている_whilst_、テキストは読めません。 オーバーレイは、GoogleのJSによってロードされます。 オーバーレイが読み込まれるまで地図を非表示にするにはどうすればよいですか? (またはより良い解決策?)

2 回答


4


実際には、JavaScriptを使用して、オーバーレイがロードされたときにのみマップが表示されるようにすることができます。

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はサーバーから画像を表示するだけなので、マップを表示する前にキャッシュにロードすることで問題を解決できます。


0


v2 Apiにオーバーレイが読み込まれたことを知る方法がありません。またはオーバーレイが完了するまで地図を非表示にします。

  • load()*イベントは、オーバーレイの読み込みが完了する前に発生します。 オーバーレイが684KBと非常に大きいことに気付きました。 小さいオーバーレイはより速くロードされます。

また、背景画像またはお問い合わせテキストの後ろに隠されている何かを置くことを検討することもできます(5秒間のみ許可されます)。