Why Google maps refuses to render fully

Question

This problem afflicts chrome, ff and opera (all latest) on fedora 23.

Its a django app which uses angular's uiGmapGoogleMapApiProvider to initialize google maps (v3). I've seen many posts which show a possible solution involving google.maps.events.trigger(map, 'resize'). This does not work for me.

My map gets rendered in the following html snippet:

<section class="section-googlemap">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" 
     options="options" 
     events="map.events"                         
     control="map.control">
  </ui-gmap-google-map>
</section>

For the uiGmapGoogleMapAPIProvider, i've the following codebase:

   uiGmapGoogleMapApiProvider.configure({
      key: "XXXXYYYY",
      v: "3.17",
      libraries: "weather,geometry,visualization"
  });

Then in another controller, i've the following:

uiGmapGoogleMapApi.then(function(maps) {
            $scope.maps = maps;
            geocoder = new maps.Geocoder();
        });

I've referred to the following SO posts and tried to get this working but to no avail:

Google Map not loading completely after inital call

Google Map shows only partially

Google Map displaying just partially

Please tell me if there is anything else i can do.