google map is a grey box in my ember component

I'm trying to include a google map in my ember app, I created a component for it:

import Ember from 'ember';

export default Ember.Component.extend({
  didRender: function () {
    var container = this.$('.map-canvas')[0];
    try {
      var options = {
        center: new window.google.maps.LatLng(
          this.get('latitude'),
          this.get('longitude')
        ),
        zoom: 15
      };
      var map = new window.google.maps.Map(container, options);
      google.maps.event.trigger(map, 'resize');
    }catch (exception){
      console.log("Unable to initialise map " + exception)
    }
  }
});

and the corresponding template:

<div class="map-canvas" style="width:500px;height:500px;"></div>

The result is that in my page I only see a grey box 500x500 px when I hover and click inside it I see in the inspector network traffic going to googleapis, with data going back and forth, which tells me that the map is actually working fine, just for some reason it's not bein shown.

Also if I inspect the content of the div, I can see data being populated:

 <div class="map-canvas" style="width: 500px; height: 500px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
  <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(&quot;http://ift.tt/1nZHQOS;) 8 8, default;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
        <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
          <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
        </div>
      </div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>

      <div style="position: absolute; z-index: 0; transform: translateZ(0px);">
        <div style="overflow: hidden;"></div>
      </div>

      <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
        <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
      </div>
    </div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; height: 100%;"></div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
    </div>
  </div>
</div>