height | Tech Tips & Tricks

Fit All Markers Of GoogleMap In Android

November 26, 2015 by blogmeister·0 Comments

So you’ve seen posts in forums that show you how to fit all markers in Android’s map. However, you notice the top part gets cut off.

The solution is to set the top padding of the Google Map to the height of your marker Drawable.

Here is the code to have all markers shown in the map.

LatLngBounds.Builder builder = new LatLngBounds.Builder();
for (Marker marker : markers) {
    builder.include(marker.getPosition());
}
LatLngBounds bounds = builder.build();
CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 10);
googleMap.moveCamera(cu);

LatLngBounds.Builder builder = new LatLngBounds.Builder();

for (Marker marker : markers) {

builder.include(marker.getPosition());

}

LatLngBounds bounds = builder.build();

CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 10);

googleMap.moveCamera(cu);

Now, to make sure all the markers get shown within the map, simply get the height of the Drawable and apply it to the map’s padding.

googleMap.setPadding(0, getResources().getDrawable(R.drawable.my_marker).getIntrinsicHeight(), 0, 0);

1	googleMap.setPadding(0, getResources().getDrawable(R.drawable.my_marker).getIntrinsicHeight(), 0, 0);

Angular JS ng-view Height Problem

March 8, 2015 by blogmeister·0 Comments

When I used a bootstrapped 3.0 template together with Angular JS, I found out that the height of the DIV layer where ng-view resides does not change its height to fill the window viewport height if its content height is small.

I have not found any solution in any forum regarding this problem so what I did was to create a directive and added it to the HTML element where ng-view is located.

My template contains only a horizontal bar at the top, while the bottom is occupied by the content where ng-view is.
This is my HTML:

<body ng-controller="AppCtrl">
    <div id="main_navbar" class="navbar">
        ....
    </div>
    <div class="container-fluid-full" ng-view resize>
    </div>
</body>

....

</div>

</div>

</body>

This is my directive:

AppIndex.directive('resize', function ($timeout) {
	return {
		restrict: 'A',
		link: function(scope, elem, attrs, controller) {
			angular.element(document).ready(function () {
				$(window).resize();
				$timeout(function() {
					if (($(elem).height()  + $('#main_navbar').height()) < $(window).height()) {
						$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');
					}
				});
			});
		}
	};
});

AppIndex.directive('resize', function ($timeout) {

return {

restrict: 'A',

link: function(scope, elem, attrs, controller) {

angular.element(document).ready(function () {

$(window).resize();

$timeout(function() {

if (($(elem).height() + $('#main_navbar').height()) < $(window).height()) {

$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');

}

});

}

};

});

What the code does, is that once the ng-view works its magic and populates the HTML contents to the DIV layer, the Angular JS Directive will wait for the DOM till it is ready. Angular JS also has its own way to detect if a DOM is ready the same way JQuery does, but with a different syntax.

Once it is ready, I call on the $(window).resize() function to simulate a window viewport resize, then do the formula to adjust the height of the DIV content layer to fill the extra height of the window viewport.

Without calling the resize() function the height adjustment will not work when, say, you have a tab element and one of those tabs contains small content.

If you have a footer at the top, then simply add the footer height to the computation.

How To Auto Height JQuery Modal Window

February 28, 2015 by blogmeister·0 Comments

This post is about JQuery’s modal() function and not the dialog() function. There is the common problem that when the content is long, the height of the modal window does not automatically adjust based on content height.

To bypass this problem, you need to listen to the show event and resize the modal window. This is how to do it.

$('#myid').on('show', function () {
	$('.modal-body',this).css({width:'auto', height:'auto', 'max-height':'100%'});
});
$('#myid').modal('show');

$('#myid').on('show', function () {

$('.modal-body',this).css({width:'auto', height:'auto', 'max-height':'100%'});

});

$('#myid').modal('show');

This code sets the width to auto as well. However, you can change the width value however you see fit and the height will still auto-adjust itself once the show() function is called.

If you noticed in the code, the max-height attribute is set to 100%. If your content is too long, chances are your modal window will be displayed beyond the screen height. To ensure that the height stays within the display screen height, you can use this value instead:

$(window).height() * 0.8

1	$(window).height() * 0.8

Where 0.8 means 80% of the window screen height.

Tech Tips & Tricks

tech tips gadgets programming software

Tag: height

Fit All Markers Of GoogleMap In Android

Angular JS ng-view Height Problem