javascript - jQuery gmaps 标记信息窗口不会在启动时显示

Question

我有一个关于 jQuery Google map 代码的简单问题。

我已向 map 添加了标记，但信息窗口在开始时不会显示，仅在鼠标悬停后才显示。

这是代码:

(function ($) {
var map;
var lat = XX.XXXXXX;
var lng = X.XXXXX;
var htmlcontent = 'CONTENT';
$(document).ready(function(){
if ( document.getElementById("map") ) {
  map = new GMaps({
    el: '#map',
    lat: lat,
    lng: lng,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : true,
    streetViewControl : false,
    mapTypeControl: true,
    overviewMapControl: true
  });

  var marker = map.addMarker({
    lat: lat,
    lng: lng,
    title: 'THE TITLE',
    infoWindow: {
      content: htmlcontent
    },
    mouseover: function(e){
      this.infoWindow.open(this.map, this);
    }
  });

  marker.infoWindow.open(map.self, marker);
  map.setCenter(XX.XXXXXX, X.XXXXXX);
};
});   
})(jQuery);

所以，这是我遇到问题的部分:

marker.infoWindow.open(map.self, marker);

几周(或几个月)前，效果很好。

我将在控制台中收到此错误

infowindow.js:4 Uncaught TypeError: Cannot read property 'get' of undefined

以及这个警告

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

如何修复标记的信息窗口？

编辑:我单独设置了标记的中心，因为标记的弹出窗口根本不居中。

编辑2:添加了API key ，没有错误或警告，但标记的信息窗口不会在开始时显示

Answer 1

google.maps.Map 对象是map.map:

代码片段:

(function($) {
  var map;
  var lat = 42;
  var lng = -72;
  var htmlcontent = 'CONTENT';
  $(document).ready(function() {
    if (document.getElementById("map")) {
      map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng,
        zoomControl: true,
        zoomControlOpt: {
          style: 'SMALL',
          position: 'TOP_LEFT'
        },
        panControl: true,
        streetViewControl: false,
        mapTypeControl: true,
        overviewMapControl: true
      });

      var marker = map.addMarker({
        lat: lat,
        lng: lng,
        title: 'THE TITLE',
        infoWindow: {
          content: htmlcontent
        },
        mouseover: function(e) {
          this.infoWindow.open(this.map, this);
        }
      });

      marker.infoWindow.open(map.map, marker);
      map.setCenter(42, -72);
    };
  });
})(jQuery);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>