9

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.

0

1 Answer 1

3

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.

2
  • Thanks, it solves the problem for medium strokeWeight, but when I tried setting it to 20 the problem still exists. Commented Jul 21, 2014 at 10:19
  • 1
    Right. I didn't test that out. You might want to mention that in the bug report as well. Problem occurs with a strokeWeight bigger than 8.
    – MrUpsidown
    Commented Jul 21, 2014 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.