When I add an arrow to a polyline, it's cut off when the arrow lays on the edge of a map tile. This can be reproduced with the sample code from the docs (https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow), just make it draggable and move it a little.
Here's how it looks when not on edge:
Here's how it looks on edge:
The problem exists in both release (3.16) and experimental (3.17) versions. I've reported it on google's bugtracker, but it will probably take years before they fix it. So, does anyone know a workaround?
Edit: Oh, I should probably add that it doesn't happen with small strokeWeight, it has to be a bit larger like on the image.
Issue:
Bug happens when using a predefined symbol path.
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
JSFiddle demo
Solution:
Create your own symbol path and problem will not appear anymore.
// Define your custom symbol path
var lineSymbol = {
path: 'M -2,0 0,-2 2,0 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
JSFiddle demo
Quite an easy fix but it's still a bug so I think it's a good thing that you created a bug report.
Edit:
We got a feedback from Google.
The jsfiddle shows a symbol that's too big.
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol
The documentation for the 'scale' parameter says: after scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With