Google Maps API v3 SVG markers disappear

Question

I am using SVG path notation to create markers along with a polyline using Google Maps API v3. Sometimes, after adding a few markers, they just stop showing from the map. If I pan the map, even just 1px, they show again.

SVG markers stop showing after adding a few

SVG markers show again after pan

This happens in FF, Safari, Chrome and iPhone browsers.

Here is my code for the polyline:

var lineSymbol = {
    path: g.SymbolPath.FORWARD_OPEN_ARROW,
    scale:1.5
};

polyOptions = {
    strokeColor: '#0026b3',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    geodesic: true,
    icons: [{
        icon: lineSymbol,
        repeat: '100px'
    }],
    zIndex: 10
};

polyLine = new g.Polyline(polyOptions);
polyLine.setMap(map);

And the code for the SVG marker:

var path = polyLine.getPath();
path.push(event.latLng);

var icon = {

    path: "M68.501,23.781 43.752,48.529 66.918,71.695 66.918,120.362 70.085,120.362 70.085,71.694 93.249,48.529",
    fillColor: iconColor,
    fillOpacity: .8,
    anchor: new g.Point(70.085, 120.362),
    strokeWeight: 0,
    scale:.4
};

var marker = new g.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon,
    title: title,
    zIndex : -20
});

Any idea why my markers just vanish when they actually are on the map? Thanks in advance.

Here is a fiddle where you can reproduce the problem: http://jsfiddle.net/upsidown/gNQRB/

Here is a YT video to illustrate the issue: https://www.youtube.com/watch?v=uGAiwAuasmU

Edit:

A bug report has been created at Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

Answer 1

Works for me, tested with Chrome (Windows) Version 26.0.1410.64

However, few things to try out:

• Remove marker zIndex, you are purposely trying to hide it under? see: zIndex -20
• Remove fillOpacity
• You said that moving map brings it to visible? You are already doing map.setCenter(); but its not enough? you could alternatively trigger one of the map events when you add marker so you dont need to move it, like : google.maps.event.trigger(map, 'drag');
• What if you store all markers inside array and loop them through when new one is added? and trigger their google.maps.event.trigger(marker, 'icon_changed');
• Use pngs with same code and see if problem is with svg only

Here is JS fiddle where I tried some of these things.

Edit:

After several tests I noticed that using map.panTo(latLng); instead of map.setCenter(latLng); makes SVG markers to draw correctly. Alternatively, if you dont want to pan to center, using map.panBy(x, y); as 1 pixel and then back to previous center (fast) might have similar effect of solving this problem.

Here is JS fiddle to see that in action.