CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
mandelbug
mandelbug

Reputation: 1808

Google Maps v3 Polygon/Line Vertical Tears and Offset

While testing a Google Maps map, I came across a strange error. When rendering a polygon/line, I am seeing vertical "tears" periodically along the polygon/line. The sections created by the tears and the polygon/line itself have seemingly random offsets based on your zoom level as well. This happened in Chrome on Linux, Safari on OSX, and Edge on Windows 10. The gif explains it much better than I can.

What happening

Here are my map options:

zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID

And here is how I add the polygon:

var polygon = new google.maps.Polygon({
    path: node.data.path,
    title: node.text,
    strokeColor: node.data.strokeColor,
    strokeOpacity: node.data.strokeOpacity,
    strokeWeight: node.data.strokeWeight,
    fillColor: node.data.fillColor,
    fillOpacity: node.data.fillOpacity
});

mapElements[node.id].setMap(map);

Am I missing something, or is this a bug?

Upvotes: 1

Views: 443

Answers (1)

mandelbug
mandelbug

Reputation: 1808

In my case, it was a problem with Bootstrap 3.

Basically you have to override the style for box-sizing in your canvas.

See this link for more details.

from the link: [3.0 rc1] Google Maps Style Issues caused by * box-sizing #8945:

In bootstrap 3 there is a base style in scaffolding.less for

* {
    .box-sizing(border-box);
}

On a google map this causes the info windows to draw the arrow to the marker slightly below the main box. http://grab.by/oYLU

Can you be more specific and just assign the box-sizing to elements that really need it instead of everything getting it on the page?

The only solution I have that seems to work is put a google-maps class on the map div and set its box sizing to content-box

.google-map-canvas {
    .box-sizing(content-box); 
}

// FIX FOR GOOGLE MAP CANVAS 

.google-map-canvas {
    .box-sizing(content-box);
    * {
        .box-sizing(inherit);
    }
    // in case you ever set max-width to 100% this fixes that
    img {
        max-width: none;
    } }

Upvotes: 1

Related Questions