Is Google Maps fitBounds throwing a bug on marker label?

Question

if I add a marker with a label on a Google Maps map and then I call fitBounds to another region, I still continue to see the label without the marker unless I zoom out. Is it a bug?

Here's a working fiddle, try to click Milano button: JSFiddle

Html:

<div id="map-canvas"></div>

CSS:

#map-canvas {
    width:100%;
    height:500px;
    position:"absolute";
    top: 0px;
    left: 0px;
    overflow:"hidden";
    background-color:#000;
}

.map-button{    
    margin-top: 10px;
    height: 30px;
    cursor: pointer;
    color: #565656;
    border:0px;
    border-radius: 3px;
    background-color:#fff;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px -1px;    
}

.map-button:hover {
    background-color: #ebebeb;
    color: #000;
}

Javascript:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(41.29085, 12.71216),
        zoom: 6,
        gestureHandling: 'greedy'               
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var marker = new google.maps.Marker({
                                    position: map.getCenter(), 
                                    map: map, 
                                    label: {
                                        text:'Roma',
                                        fontSize: '28px'
                                    }
                                });

    var control = document.createElement('button');
    control.innerHTML = 'Milano';
    control.className = 'map-button';

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);

    google.maps.event.addDomListener(control, 'click', function (event) {
        var milanBounds = new google.maps.LatLngBounds(
                                                {lat: 45.462818, lng: 9.184145},
                                                {lat: 45.466806, lng: 9.190239});

        map.fitBounds(milanBounds);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

Looks like this only happens in the experimental API version. Try to specify the version in your API call to get the release version instead of the experimental (add `v=3` in the API call). — MrUpsidown, Mar 08 '18 at 15:50
Thank you very much, specifying the version in the API call will make it work correctly. Can you write your comment as an answer so it can be marked as correct? — Jumpy, Mar 08 '18 at 16:28

score 1 · Answer 1 · answered May 19 '18 at 17:25

1

Changing the version of API helped me with the same bug (labels moving without markers). It happens when I try to pan map to a specific marker position and then zoom it in. In my case version 3.31 of google maps API worked out.

answered May 19 '18 at 17:25

Alex

11
1

score 0 · Accepted Answer · answered Mar 09 '18 at 09:17

Looks like the issue you describe only happens with the experimental version of the API.

By not specifying a version number in your API call, you will get the experimental version, which is probably not the best idea, especially for applications in production.

Try to specify the version in your API call to get the release version, for example:

//maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY

Please refer to this link to know more about versioning and the best practices encouraged by Google.

Is Google Maps fitBounds throwing a bug on marker label?

2 Answers2