CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Charles
Charles

Reputation: 26

Google Maps API fitbounds moving map to left or right

I have an application where I save center latitude, longitude and the distance between the center and the North East corner of the map, in this way we could draw the map with the same bounds we saved. The first issue I faced when I was drawing the map with the stored data was that using fitbounds() a margin is added to the bounds I pass, this added an extra zoom level, with it the map looks very different to the original version of the map. To fix it I recalculate the bounds with the solution #6 from : https://code.google.com/p/gmaps-api-issues/issues/detail?id=3117

I use map.fitbounds(new bounds) with the result of recalculating the bounds due to the margin added by the fitbounds method.

But now I noticed that when I draw a map with the values stored in database, the map is being moved to the right or left randomly, this is more notorius on low zoom levels. I hope you can give an idea why this is happening or how can I fix it. Thank you.

Upvotes: 0

Views: 1585

Answers (1)

xomena
xomena

Reputation: 32148

You can write your custom function to work around a margin. Please look at the implementation of myFitBounds() function.

code snippet:

var map; 
function myFitBounds(myMap, bounds) {
    myMap.fitBounds(bounds);

    var overlayHelper = new google.maps.OverlayView();
    overlayHelper.draw = function () {
        if (!this.ready) {
            var projection = this.getProjection(),
            zoom = getExtraZoom(projection, bounds, myMap.getBounds());
            if (zoom > 0) {
                myMap.setZoom(myMap.getZoom() + zoom);
            }
            this.ready = true;
            google.maps.event.trigger(this, 'ready');
        }
    };
    overlayHelper.setMap(myMap);
}

// LatLngBounds b1, b2 -> zoom increment
function getExtraZoom(projection, expectedBounds, actualBounds) {
    var expectedSize = getSizeInPixels(projection, expectedBounds),
        actualSize = getSizeInPixels(projection, actualBounds);

    if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
        return 0;
    }

    var qx = actualSize.x / expectedSize.x;
    var qy = actualSize.y / expectedSize.y;
    var min = Math.min(qx, qy);

    if (min < 1) {
        return 0;
    }

    return Math.floor(Math.log(min) / Math.log(2) /* = log2(min) */);
}

// LatLngBounds bnds -> height and width as a Point
function getSizeInPixels(projection, bounds) {
    var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
    var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
    return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
}  

function initialize() { 
    var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644), 
        panControl: false, 
        zoomControl: false, 
        mapTypeControl: false, 
        scaleControl: false, 
        streetViewControl: false, 
        overviewMapControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    bounds = new google.maps.LatLngBounds(); 
    var extendPoint1 = new google.maps.LatLng(35.491823,6.626860999999963); 
    var extendPoint2 = new google.maps.LatLng(47.09192,18.520579999999995); 
    new google.maps.Marker({position: extendPoint1,map: map}); 
    new google.maps.Marker({position: extendPoint2,map: map}); 
    bounds.extend(extendPoint1); 
    bounds.extend(extendPoint2); 
    myFitBounds(map,bounds);  
    //map.fitBounds(bounds);
} 
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initialize"></script>

Upvotes: 1

Related Questions