Streets change their width while zooming in Google Javascript API

Question

I try to put some rectangles on a styled map which can be zoomed in and out. I noticed that every time I change the zoom level from e.g. 17.5 to 17.6, the streets are changing their width and because of that the rectangle changes its position compared to the street.

Code:

map

var latlng = new google.maps.LatLng(lat, lng);

var myOptions = {
    zoom: zoom,
    center: latlng,
    disableDefaultUI: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    styles: [
        {
            featureType: 'all',
            stylers: [{visibility: "off"}]
        },
        {
            featureType: 'landscape',
            stylers: [{color: "#000000"}, {visibility: "on"}]
        },
        {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{color: '#ffffff'}, {visibility: "on"}, {weight: 2}]
        }
    ]
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

rectangle

var rectangle = new google.maps.Rectangle({
    fillColor: '#FF0000',
    fillOpacity: 1,
    strokeColor: '#FF0000',
    strokeWeight: 2,
    strokeOpacity: 1,
    map: map,
    bounds: {
        north: lat1,
        south: lat2,
        west: lng1,
        east: lng2
    }
});

I want the rectangle to be in the same place of the street at the all zoom levels. Can this be done?

PS. Here's what it looks like: zoom=19.5 vs zoom=19.6

EDIT: I forgot to mention that step-like changing width only occurs when crossing 0.5 - if I change the zoom from 19.2 to 19.3 there is no difference in positions. See the example: zoom=21.1 vs zoom=21.3 I also noticed that rectangle's stroke seems to change its weight less often that the street's one. Can somebody explain the reason of such behavior?

Well stuff does look bigger when you are closer to it! Im not sure how to fix it, maybe you need to listen to the zoom event on the map and redraw the rectangle? — Rhumborl
– Rhumborl, Commented Apr 10, 2018 at 19:04
@NielsNet, the rectangle has specific lat-lng bounds and is responsible to the zoom change. Do you suggest "refreshing" the rectangle or changing its strokeWeight parameter? — Fartosh
– Fartosh, Commented Apr 10, 2018 at 19:12
@Fartosh Some kind of refreshing is probably necessary. However due tu rouding there will probably always be a difference. — NielsNet
– NielsNet, Commented Apr 10, 2018 at 19:14

Evandro Teixeira · Accepted Answer · 2024-10-23 13:59:04Z

0

The Map view does this on purpose in order to make streets pop out more, so there's no way to change it, they'll keep having inconsistent widths in order to maintain accessibility. If you need a consistent width on zoom level, your only option with the maps api is to use the Satellite view

answered Oct 23, 2024 at 13:59

Evandro Teixeira

3701 gold badge4 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Streets change their width while zooming in Google Javascript API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related