Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Symbols cut off by map tiles

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.

like image 519
Sebastian Nowak Avatar asked Jul 20 '14 17:07

Sebastian Nowak


1 Answers

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.

like image 145
MrUpsidown Avatar answered Sep 22 '22 03:09

MrUpsidown