Google Maps API v3 SVG markers disappear

问题:

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

回答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.

回答2:

I had the same problem using png markers icons for markers, some times after fitBounds (some markers disappears and they appear when I zoom-in) and only dissappears if I make this markers draggables.

I tried this: map.panTo(map.getCenter()); after setting markers draggables

And now it works fine. http://www.mapgolfcourse.com/view/2.php?card=no

It seem a bug on th V3 implementation. Miguel

回答3:

I had kind same trouble. About 10 on 100 markers were displayed at launch. Then after zoom or pan every markers were either glitched or hidden.

Find out it was the svg markups in the icon files that were causing the trouble.

Buggy With:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">

Fixed with :

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">

回答4:

Thanks for the "panTo" on @Mauno Vähä answer!

I'm also setting "optimized: false". Works great.

Here is my code using an animated svg file:

var marker;
var map;

var image = {
    url: "http://localhost:8080/images/animarker.svg",
    size: new google.maps.Size(100, 100),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(42, 42),
    scaledSize: new google.maps.Size(100, 100)
};

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: {lat: 59.325, lng: 18.070}
    });

    marker = new google.maps.Marker({
        map: map,
        icon: image,
        draggable: false,
        optimized: false,
        position: {lat: 59.327, lng: 18.067}
    });
}

回答5:

Someone suggested above to pan by 1 pixel and back again. This is an fyi that panBy(0,0) works too with the advantage of being simpler and with no visual artifacts:

Had same problem using tomchentw/react-google-maps. Using panBy(0,0) in onMapIdle() fixed the problem. If you're not using a package I assume adding a map 'idle' event listener with panBy(0,0) will work.