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

Do you have a jsfiddle (or a link to a map) that shows the problem? — geocodezip, May 01 '13 at 13:32
Yes. I added a fiddle to my question http://jsfiddle.net/upsidown/gNQRB/ and I was able to reproduce the issue there. — MrUpsidown, May 01 '13 at 13:49
Anyone on this? I feel I ran into a bug or there must be something I am doing wrong, but what? — MrUpsidown, May 02 '13 at 09:33

Mauno Vähä · Accepted Answer · 2013-05-06T17:51:33.907

17

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.

edited May 06 '13 at 17:51

answered May 04 '13 at 17:09

Mauno Vähä

9,688
3
33
54

1. I can try that, but yes the zIndex -20 has a purpose in my app 2. Will try it 3. No. With or without centering on the last added waypoint makes no difference. The bug still occurs. 4. Can you please clarify? 5. That's what I was using before, and I don't think the problem occured by then, but I will try that again. – MrUpsidown May 05 '13 at 00:36
I am on Mac OS X 10.7.5 and I can reproduce the issue with Chrome Version 26.0.1410.65 – MrUpsidown May 05 '13 at 00:44
hmm.. that's interesting, I tried some of these things by editing your fiddle and simplifying code to see when it works (link in this answer). You could try it now, alternatively I could view this tomorrow with my mac at work and see if this problem exists, makes it much easier to debug :) – Mauno Vähä May 05 '13 at 10:53
Thanks for this. I was busy all day. I just tried your fiddle and the problem also occurs. I will be testing more later on. – MrUpsidown May 05 '13 at 17:58
Yes, unfortunately I already tested it with my mac and Chrome Version 26.0.1410.65.. it works, cant really solve this one if I cant repeat the bug, sorry :/ – Mauno Vähä May 06 '13 at 05:13
I will try it today on another mac, see if the problem occurs. Thanks for trying anyway. – MrUpsidown May 06 '13 at 08:35
I tested on a total of 3 different macs and the problem occurs on all of them. Here is a video to show the issue: https://www.youtube.com/watch?v=uGAiwAuasmU I also confirm that the problem does NOT occur when using an image marker (see http://jsfiddle.net/upsidown/KQ5ra/) – MrUpsidown May 06 '13 at 15:30
Thnx for the video - i was enable to see bug myself after that, made several tests, see my answer. – Mauno Vähä May 06 '13 at 17:48
Perfect! That seems to do the trick. No idea why setCenter doesn't work but I am fine with panTo. Thanks for your help! – MrUpsidown May 06 '13 at 22:13
1

glad that could help, lets wish that they fix this with upcoming versions ;) – Mauno Vähä May 07 '13 at 05:16
1

This answer is a life-saver. Thank you. – kaoscify Apr 22 '15 at 21:55
1

Thanks so much! I was also having the same problem, and panTo appears to have done the trick! It's kinda lame Google just closed out the bug citing a stackoverflow workaround, instead of actually fixing the bug. – GeekLad Jan 27 '16 at 14:54

score 5 · Answer 2 · edited Jan 23 '20 at 12:19

5

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.

It seem a bug on the V3 implementation.

edited Jan 23 '20 at 12:19

Machavity

30,841
27
92
100

answered Nov 19 '13 at 13:14

Miguel Perez Subias

67
1
1

Thank you so much for posting this. I was having an issue where after a call to map.fitBounds() many of my map markers with a label set on them would not render until the map was dragged. This occurred even if adding the map markers (with labels) after fitBounds() was fully completed. It also occurred even if just setting a label on an existing marker. Simply adding map.panTo(map.getCenter()) after any call to map.fitBounds() resolved the issue. – Brett Birschbach Apr 13 '17 at 00:18

Google Maps API v3 SVG markers disappear

2 Answers2

Linked