Google Maps API v3 SVG markers disappear
google-maps-api-3, google-maps-markers, google-polyline, svg
Solution
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.
Problem
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