Google Maps overlay disappears at certain zoom level

Question

I am having a problem with a custom overlay icon marker in google maps. It works fine at all zoom levels, but disappears at max zoom. In the demo only the lower icon disappears, but the upper one is ok.

Demo: http://random.hypervolume.com/map_bug.html

Try to zoom in on the lower marker, the one on 34-th street. At max zoom level it disappears.

Here is the source:

  var map;

  function init() {
    var opts = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById('mapcanvas'), opts);
    map.setCenter(new google.maps.LatLng(40.761231, -73.9839609));

    new MyMarker(new google.maps.LatLng(40.761231, -73.9839609), map, "A");
    new MyMarker(new google.maps.LatLng(40.75013, -73.987974), map, "B");
  }

  var ICON_WIDTH = 52;
  var ICON_HEIGHT = 52;
  var ICON_URL = "http://random.hypervolume.com/m1.png";

  function MyMarker(position, map, id) {
    this.id = id;
    this.position = position;
    this.map = map;
    this.setMap(map);
  }

  MyMarker.prototype = new google.maps.OverlayView();

  MyMarker.prototype.onAdd = function() {
    var div = this.div = document.createElement('DIV');
    div.id = this.id;

    div.style.width = ICON_WIDTH;
    div.style.height = ICON_HEIGHT;
    div.style.position = 'absolute';

    var image = new Image();
    image.src = ICON_URL;
    div.appendChild(image);

    this.getPanes().overlayMouseTarget.appendChild(div);
  };


  MyMarker.prototype.draw = function() {
    var pos = this.getProjection().fromLatLngToDivPixel(this.position);
    pos.x -= ICON_WIDTH / 2;
    pos.y -= ICON_HEIGHT / 2;
    this.div.style.top = pos.y + 'px';
    this.div.style.left = pos.x + 'px';
  };

Answer 1

Ok, got it!

Just add the following style to your div:

-webkit-transform: translateZ(0px)

You can do this in JS:

div.style.webkitTransform = 'translateZ(0px)';

Origin issue: http://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=176