Question

If you navigate to this page and switch to the Map view in Chrome 21, then pan and zoom, the tiles don’t seem to paint. Closer investigation in the dev tools shows that there is no attempt made to download tiles at all. Strangely, there are also no errors or logged messages.

Stranger still – this page works perfectly in IE9 and FF11 & 14.

Ideas?

EDIT: Perhaps some additional detail – as I pan around, there are a number images added to the “Resources” tab with URLs like http://maps.googleapis.com/maps/gen_204?… as far as I can tell these all return an HTTP status of 204 – no content. In one of the functioning browsers the same thing happens, but this is closely followed by the loading of tile data from URLs like http://mt0.googleapis.com/vt?lyrs=m@182176386&src=apiv3&hl=en-AU&x=472&y=293&z=9&s=Galil&style=api%7Csmartmaps – except that in Chrome that doesn’t happen.

IE’s dev tools says the initiator for that image (the mt0 one) is an img.src property change – indicating that some JS has correctly set the src for an img element to get the tile. So why wouldn’t that be happening in Chrome – maybe some event not being raised or going to exception quietly? I set the “pause on all exceptions” as well as the “uncaught” ones but that did not yield any fruit.

Searching around I have seen many similar requests but nothing that seems relevant, so again, any ideas appreciated.

Answer 1

For the record, we discovered the problem was with the addition of the “fake” marker.

The InfoBox plugin we are using requires a marker reference to the constructor.
We were creating that marker at the correct ‘position’ and assigning a ‘icon’ to a MarkerImage with a position of (0,0), a size of (0,0), and a url of empty string.

While this approach appears to work fine in IE/FF it appears to not work so well in Chrome. We have not tried to identify why at this stage.

Simply omitting the ‘icon’ attribute from the MarkerOptions object sent to the constructor of google.maps.Marker did the trick; i.e.

var mkr = new google.maps.Marker(
    {
        map: this.googleMap,
        position: this.position,
        clickable: false
    }
);

in place of

var mkr = new google.maps.Marker(
    {
        map: this.googleMap,
        position: this.position,
        clickable: false,
        icon: new google.maps.MarkerImage(
                '',
                new google.maps.Size(0,0),
                new google.maps.Point(0,0),
                new google.maps.Point(0,0)
        )
    }
);