I was recently working with Leaflet and Angular. While Leaflet? just to avoid (again and again) Google Maps.
I do recommend Leaftet directive for Angular. Very efficient, quite powerful. However, it lacks one feature : redim the height of its map dynamically, and thus, save it to the local storage.
So I have written a very small and efficient directive on top of leaflet directive for Angular that could be found here.
To use it, add the script after leaflet ones
<script src="angular-leaflet-directive-mapresize.js"></script>
and add the “dragmap” directive to leaflet’one:
<leaflet width='100%' height='600' defaults="defaults" dragmap></leaflet>
It adds a very basic div below the map that could be use to resize the height of the map.
The most important lines into the module’s code are the following:
controller.getMap().then(function(map) { map.invalidateSize(); });
It forces leaflet to recalculate the size of the div and avoids some gray tiles.