CODEWITHSUNDEEP
google-maps
hctopcu
hctopcu

Reputation: 379

Google Maps API Modify Bounds to Make Space to Control Divs

I have a 100% - 100% Map canvas and absolute positioned divs to show my controls.

I add multiple polylines and markers to map and then use fitBounds.

I need a way to modify map so that my left positioned 450px div does not overlap any paths.

By searching I found out I need to modify bounds. How to make fitBounds aware of custom controls says

        var widthOfPanel = 450;
        var degreesPerPx = (360 / (Math.pow(2,z))) / 256;
        var degreesForPanel = degreesPerPx * widthOfPanel;

At this point I know how much I need to shift But,

        var southwest = map_api.getBounds().getSouthWest();
        var northeast = map_api.getBounds().getNorthEast();

        var swNew = new google.maps.LatLng( southwest.lat(),
                                            southwest.lng() -  degreesForPanel); 

        var bounds = new google.maps.LatLngBounds(swNew, northeast);
        map_api.fitBounds(bounds);

does not work as espected. Even setting same values ( degreesForPanel = 0) makes map just zoom out;

Upvotes: 1

Views: 523

Answers (1)

hctopcu
hctopcu

Reputation: 379

getBounds and fitBounds functions does not work as I assumed to be. Here is my solution:

  1. Do add points to bounds as usual. while keeping track of outhermost coordinates seperately.
  2. calculate zoom level after fitBounds and do math magic to convert pixels to degrees for that zoom level.
  3. create a new point to the bounds (not to the maps) by adding deggres to leftmost point you kept track of.
  4. recall fitBounds with that extra point.

init:

mycanvas.map_bounds = new google.maps.LatLngBounds();

adding points:

mycanvas.map_bounds.extend(point); // the usual way
mycanvas.extend(point); // to keep track of minimum maximum points

setting bounds :

mycanvas.fit();

Here is simplified code of mine:

mycanvas = {
    offset : 450, // pixel width from left
    minlat : null, maxlat : null, minlng : null, maxlng : null, map_bounds : null,
    extend : function(point){
                var lat = point.lat();
                var lng = point.lng();
                mycanvas.minlat = mycanvas.minlat === null ? lat : Math.min(lat,mycanvas.minlat);
                mycanvas.maxlat = mycanvas.maxlat === null ? lat : Math.max(lat,mycanvas.maxlat);
                mycanvas.minlng = mycanvas.minlng === null ? lng : Math.min(lng,mycanvas.minlng);
                mycanvas.maxlng = mycanvas.maxlng === null ? lng : Math.max(lng,mycanvas.maxlng);
    },
    fit: function(){
            map_api.fitBounds(mycanvas.map_bounds); // required to get zoom level for the next line.

            var degrees_for_panel = mycanvas.offset * ( (360 / (Math.pow(2, map_api.getZoom()))) / 256 );
            var point_for_left = new google.maps.LatLng(mycanvas.minlat, mycanvas.minlng - degrees_for_panel);
            mycanvas.map_bounds.extend(point_for_left);

            map_api.fitBounds(mycanvas.map_bounds);

        },


}

Hope it helps to someone

Upvotes: 1

Related Questions