Google在骨干视图中映射api，而不显示缩放和标记图标

Question

我正在创建一个骨干视图，我想使用Javascript api为Google地图显示地图。

在我的html文件中，我有这个：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
<div id="map" style="width: 550px; height: 300px; float:left"></div>

在骨干视图中，我有以下内容：

var MapView = Backbone.View.extend({

  el: $('#map'),

  initialize: function() {

  var defaultSettings = { date:'01/12/2016', time: '10:00', 
                       lat:'40.72815832561118', lng: '-73.99564975565187'   };

  var myLatLng = new google.maps.LatLng(defaultSettings.lat, defaultSettings.lng);

  var sv = new google.maps.StreetViewService();

  var mapOptions = {
    center: myLatLng,
    zoom: 16,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Current Position"
    });

  }
});

当我尝试加载地图时，我实际上是在我想要的确切位置上得到它，但缩放和标记的图标没有显示。

如果我等了很长时间，会显示缩放图标，但标记永远不会出现。可能是什么问题？