Search code examples
javascriptgoogle-maps-api-3labelmarkerfitbounds

Is Google Maps fitBounds throwing a bug on marker label?


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);

Solution

  • 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.